@rededor/cura 0.5.1 → 0.5.3

package/dist/collection/components/forms/cura-label/cura-label.stories.js

@@ -0,0 +1,137 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { getColorsWithDepths } from "../../../utils/utils";
+const colors = getColorsWithDepths();
+const renderCuraLabel = (label, args) => {
+  const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>
+  cura-heading { ${args.cssMarginBlock ? `
+    --margin-block: ${args.cssMarginBlock} !important;` : ``}${args.cssLineHeight ? `
+    --line-height: ${args.cssLineHeight} !important;` : ``}
+  }
+</style>
+
+` : '';
+  const block = `<cura-label${args.size && (args.size !== 'medium' && args.size !== 'regular') ? `
+  size="${args.size}"` : ``}${args.weight ? `
+  weight="${args.weight}"` : ''}${args.color ? `
+  color="${args.color}"` : ''}${args.spotColor ? `
+  spot-color="${args.spotColor}"` : ''}${args.marginBlock ? `
+  margin-block="${args.marginBlock}"` : ''}${args.lineHeight ? `
+  line-height="${args.lineHeight}"` : ''}>
+  ${label}
+</cura-label>
+`;
+  return `${styles}${block}${block}${block}`;
+};
+export default {
+  title: 'Componentes/Forms/Label',
+  tags: ['autodocs'],
+  render: (_a) => {
+    var { label } = _a, args = __rest(_a, ["label"]);
+    return renderCuraLabel(label, args);
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Define o texto do componente diretamente. Aceita tags HTML <i>Phrasing Content</i>.',
+      name: 'Content'
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['xsmall', 'small', 'medium', 'large'],
+      description: 'Define o tamanho do bloco de texto considerando `xsmall`, `small`, `medium` (default) e `large` como valores válidos.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'medium' }
+      }
+    },
+    weight: {
+      control: { type: 'inline-radio' },
+      options: ['regular', 'bold'],
+      description: 'Espessura de fonte `regular` (default) ou `bold` para todo o texto. É possível aplicar parcialmente utilizando as tags `<b>` e `<strong>`.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'regular' }
+      }
+    },
+    color: {
+      control: { type: 'select' },
+      options: ['', ...colors],
+      description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'Cor de texto padrão do tema' }
+      }
+    },
+    spotColor: {
+      control: { type: 'select' },
+      options: ['', ...colors],
+      description: 'Define a cor dos itens de interação dentro do bloco de texto como as tags `<a>`. Aceita qualquer valor do esquema de cores do design system.',
+      name: 'spot-color',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: 'accent-dark' }
+      }
+    },
+    marginBlock: {
+      control: 'text',
+      description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',
+      name: 'margin-block',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '0' }
+      }
+    },
+    lineHeight: {
+      control: 'text',
+      description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',
+      name: 'line-height',
+      table: {
+        category: 'Properties',
+        defaultValue: { summary: '125%' }
+      }
+    },
+    cssMarginBlock: {
+      control: 'text',
+      description: 'Permite a definição da propriedade `margin-block` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',
+      name: '--margin-block',
+      table: {
+        category: 'CSS Properties',
+        defaultValue: { summary: '0' }
+      }
+    },
+    cssLineHeight: {
+      control: 'text',
+      description: 'Permite a definição da propriedade `line-height` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',
+      name: '--line-height',
+      table: {
+        category: 'CSS Properties',
+        defaultValue: { summary: '125%' }
+      }
+    },
+  },
+};
+export const Label = {
+  args: {
+    label: 'Dolor sit consectetur <a href="https://www.rededorsaoluiz.com.br" target="_blank">adipiscing</a> elit.',
+    size: 'medium',
+    weight: '',
+    color: '',
+    spotColor: '',
+    marginBlock: '',
+    lineHeight: '',
+    cssMarginBlock: '',
+    cssLineHeight: ''
+  },
+};
+//# sourceMappingURL=cura-label.stories.js.map

package/dist/collection/components/forms/cura-label/cura-label.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-label.stories.js","sourceRoot":"","sources":["../../../../src/components/forms/cura-label/cura-label.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getColorsWithDepths } from \"../../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nconst renderCuraLabel = (label: string, args: any) => {\n  const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>\n  cura-heading { ${args.cssMarginBlock ? `\n    --margin-block: ${args.cssMarginBlock} !important;` : ``}${ args.cssLineHeight ? `\n    --line-height: ${args.cssLineHeight} !important;` : ``}\n  }\n</style>\n\n` : '';\n  const block = `<cura-label${args.size && (args.size !== 'medium' && args.size !== 'regular') ? `\n  size=\"${args.size}\"` : ``}${args.weight ? `\n  weight=\"${args.weight}\"` : ''}${args.color ? `\n  color=\"${args.color}\"` : ''}${args.spotColor ? `\n  spot-color=\"${args.spotColor}\"` : ''}${args.marginBlock ? `\n  margin-block=\"${args.marginBlock}\"` : ''}${args.lineHeight ? `\n  line-height=\"${args.lineHeight}\"` : ''}>\n  ${label}\n</cura-label>\n`;\n  return `${styles}${block}${block}${block}`;\n}\n\nexport default {\n  title: 'Componentes/Forms/Label',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    return renderCuraLabel(label, args);\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Define o texto do componente diretamente. Aceita tags HTML <i>Phrasing Content</i>.',\n      name: 'Content'\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['xsmall', 'small', 'medium', 'large'],\n      description: 'Define o tamanho do bloco de texto considerando `xsmall`, `small`, `medium` (default) e `large` como valores válidos.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium'}\n      }\n    },\n    weight: {\n      control: { type: 'inline-radio' },\n      options: ['regular', 'bold'],\n      description: 'Espessura de fonte `regular` (default) ou `bold` para todo o texto. É possível aplicar parcialmente utilizando as tags `<b>` e `<strong>`.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'regular'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'Cor de texto padrão do tema'}\n      }\n    },\n    spotColor: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor dos itens de interação dentro do bloco de texto como as tags `<a>`. Aceita qualquer valor do esquema de cores do design system.',\n      name: 'spot-color',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent-dark'}\n      }\n    },\n    marginBlock: {\n      control: 'text',\n      description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',\n      name: 'margin-block',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '0'}\n      }\n    },\n    lineHeight: {\n      control: 'text',\n      description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',\n      name: 'line-height',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '125%'}\n      }\n    },\n    cssMarginBlock: {\n      control: 'text',\n      description: 'Permite a definição da propriedade `margin-block` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n      name: '--margin-block',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '0'}\n      }\n    },\n    cssLineHeight: {\n      control: 'text',\n      description: 'Permite a definição da propriedade `line-height` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n      name: '--line-height',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '125%'}\n      }\n    },\n  },\n};\n\nexport const Label = {\n  args: {\n    label: 'Dolor sit consectetur <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">adipiscing</a> elit.',\n    size: 'medium',\n    weight: '',\n    color: '',\n    spotColor: '',\n    marginBlock: '',\n    lineHeight: '',\n    cssMarginBlock: '',\n    cssLineHeight: ''\n  },\n};\n"]}

package/dist/collection/components/forms/cura-radio/cura-radio.css

@@ -0,0 +1,146 @@
+@charset "UTF-8";
+:host {
+  display: block;
+  width: fit-content;
+  box-sizing: border-box;
+  /* Estado Success */
+  /* Estado Error */
+  /* Estado checked */
+  /* Estado disabled */
+  /* Estado hover para não disabled e não checked */
+}
+:host .container {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  gap: var(--gap);
+}
+:host .position.container {
+  flex-direction: row;
+}
+:host .position .label-wrapper {
+  justify-content: end;
+}
+:host .position .message {
+  text-align: right;
+}
+:host .position .label {
+  order: 1;
+}
+:host .info {
+  display: flex;
+  flex-direction: column;
+}
+:host .label-wrapper {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  gap: 5px;
+}
+:host .control {
+  width: fit-content;
+  cursor: pointer;
+  position: relative;
+}
+:host .radio {
+  margin: 0;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border-radius: 50%;
+  border: 2px solid var(--primary-base-neutral-medium);
+  background: var(--neutral-purewhite);
+  box-sizing: border-box;
+  transition: border-color 0.3s;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  width: var(--size);
+  height: var(--size);
+  flex: 0 0 var(--size);
+}
+:host .radio::after {
+  content: "";
+  background: var(--color-base-light);
+  border-radius: 50%;
+  opacity: 0;
+  transition: opacity 0.3s;
+  width: var(--size-after);
+  height: var(--size-after);
+}
+:host .radio:focus {
+  border-color: var(--info-base) !important;
+}
+:host .success .radio {
+  border-color: var(--success-base);
+  background: var(--success-lighter);
+}
+:host .success .radio:hover {
+  border-color: var(--success-base) !important;
+}
+:host .success.checked .radio {
+  border-color: var(--success-base);
+}
+:host .success.checked .radio::after {
+  background: var(--success-base);
+}
+:host .success.checked .radio:hover {
+  background: var(--success-lighter) !important;
+  border-color: var(--success-base) !important;
+}
+:host .success.checked .radio:hover::after {
+  background: var(--success-base) !important;
+}
+:host .error .radio {
+  border-color: var(--error-base);
+  background: var(--error-lighter);
+}
+:host .error .radio:hover {
+  border-color: var(--error-base) !important;
+}
+:host .error.checked .radio {
+  border-color: var(--error-base);
+}
+:host .error.checked .radio::after {
+  background: var(--error-base);
+}
+:host .error.checked .radio:hover {
+  background: var(--error-lighter) !important;
+  border-color: var(--error-base) !important;
+}
+:host .error.checked .radio:hover::after {
+  background: var(--error-base) !important;
+}
+:host .checked .radio::after {
+  opacity: 1;
+  background: var(--color-base);
+}
+:host .checked .radio {
+  border-color: var(--color-dark);
+}
+:host .checked .radio:hover {
+  border-color: var(--color-light) !important;
+}
+:host .checked .radio:hover::after {
+  background: var(--color-light);
+}
+:host .disabled .radio {
+  background: var(--primary-base-neutral-white);
+  border-color: var(--primary-darker-neutral-base);
+  cursor: not-allowed;
+}
+:host .disabled .radio::after {
+  background: var(--neutral-lighter);
+}
+:host .disabled.checked .radio {
+  border-color: var(--primary-base-neutral-base) !important;
+  background: var(--primary-darker-neutral-white) !important;
+}
+:host .disabled.checked .radio::after {
+  background: var(--primary-base-neutral-base) !important;
+}
+:host :not(.disabled):not(.checked) .radio:hover {
+  border-color: var(--primary-base-neutral-dark);
+}

package/dist/collection/components/forms/cura-radio/cura-radio.js

@@ -0,0 +1,365 @@
+import { h, Host } from '@stencil/core';
+import { formsSizes } from '../cura-forms.definitions';
+export class CuraRadio {
+  constructor() {
+    this.sizes = {
+      "large": { size: 20 },
+      "medium": { size: 14 },
+      "small": { size: 10 },
+    };
+    this.isDarkbackground = () => this.background === 'dark';
+    this.handleClick = () => {
+      if (this.disabled)
+        return;
+      this.checked = !this.checked;
+      this.onchange.emit({ value: this.value, checked: this.checked });
+    };
+    this.checked = false;
+    this.status = 'default';
+    this.disabled = false;
+    this.required = false;
+    this.label = '';
+    this.ontabindex = undefined;
+    this.position = 'left';
+    this.value = '';
+    this.name = '';
+    this.background = 'light';
+    this.size = 'medium';
+    this.color = 'accent';
+    this.styles = {};
+  }
+  sizeHandler() {
+    this.styles['--size-after'] = `${this.sizes[this.size].size}px`;
+    this.styles['--size'] = `${formsSizes[this.size].size}px`;
+    this.styles['--gap'] = `${formsSizes[this.size].gap}px`;
+  }
+  setColors() {
+    const colors = [
+      { name: '--info-base', background: 'info-base' },
+      { name: '--color-light', background: `${this.color}-light` },
+      { name: '--color-base', background: `${this.color}-base` },
+      { name: '--color-dark', background: `${this.color}-dark` },
+      { name: '--neutral-purewhite', background: 'neutral-purewhite' },
+      { name: '--success-lighter', background: 'success-lighter' },
+      { name: '--success-base', background: 'success-base' },
+      { name: '--error-lighter', background: 'error-lighter' },
+      { name: '--error-base', background: 'error-base' },
+      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
+      { name: '--primary-base-neutral-white', background: this.isDarkbackground() ? 'primary-base' : 'neutral-white' },
+      { name: '--primary-darker-neutral-white', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-white' },
+      { name: '--primary-darker-neutral-base', background: this.isDarkbackground() ? 'primary-darker' : 'neutral-base' },
+      { name: '--primary-base-neutral-base', background: this.isDarkbackground() ? 'primary-base' : 'neutral-base' },
+      { name: '--primary-base-neutral-dark', background: this.isDarkbackground() ? 'primary-base' : 'neutral-dark' },
+      { name: '--primary-base-neutral-medium', background: this.isDarkbackground() ? 'primary-base' : 'neutral-medium' },
+      { name: '--success-base-dark', background: this.isDarkbackground() ? 'success-base' : 'success-dark' },
+      { name: '--error-base-dark', background: this.isDarkbackground() ? 'error-base' : 'error-dark' },
+    ];
+    colors.forEach(color => this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.background));
+  }
+  connectedCallback() {
+    this.sizeHandler();
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes['container'] = true;
+    classes['checked'] = this.checked;
+    classes['disabled'] = this.disabled;
+    classes['position'] = this.position === 'right';
+    classes[this.status] = true;
+    return classes;
+  }
+  assignColor(type) {
+    if (this.disabled)
+      return this.isDarkbackground() ? 'primary-darker' : 'neutral-medium';
+    const statusColors = {
+      success: {
+        label: this.isDarkbackground() ? 'success-lighter' : 'success-darker',
+        message: this.isDarkbackground() ? 'success-base' : 'success-dark'
+      },
+      error: {
+        label: this.isDarkbackground() ? 'error-lighter' : 'neutral-darker',
+        message: this.isDarkbackground() ? 'error-base' : 'error-dark'
+      },
+      default: {
+        label: this.isDarkbackground() ? 'neutral-white' : 'neutral-black',
+        message: this.isDarkbackground() ? 'primary-lighter' : 'neutral-dark'
+      }
+    };
+    return statusColors[this.status][type];
+  }
+  render() {
+    return (h(Host, null, h("div", { class: this.getClasses(), style: this.styles }, h("div", { class: "info" }, h("div", { class: "label-wrapper" }, h("cura-label", { class: "label", size: this.size === 'large' ? 'medium' : 'xsmall', color: this.assignColor('label') }, this.label), this.required && h("cura-paragraph", { lineHeight: '0%', marginBlock: '0', color: "error-base" }, "* ")), h("cura-label", { color: this.assignColor('message'), size: "xsmall", class: "message" }, h("slot", null))), h("input", { type: "radio", class: `radio ${this.size.toLocaleLowerCase()}`, name: this.name, value: this.value, required: this.required, tabIndex: this.ontabindex, disabled: this.disabled, checked: this.checked, onClick: this.handleClick }))));
+  }
+  static get is() { return "cura-radio"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["cura-radio.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["cura-radio.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "checked": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Reflects the checked state of the radio button.\nMutable property allowing state change."
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "status": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'error' | 'success' | 'default'",
+          "resolved": "\"default\" | \"error\" | \"success\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Status of the radio button.\nCan be 'error', 'success', or 'default'."
+        },
+        "attribute": "status",
+        "reflect": true,
+        "defaultValue": "'default'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Reflects the disabled state of the radio button."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Reflects the required state of the radio button."
+        },
+        "attribute": "required",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text label associated with the radio button."
+        },
+        "attribute": "label",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "ontabindex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the tabindex of the radio button."
+        },
+        "attribute": "ontabindex",
+        "reflect": true
+      },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"left\" | \"right\"",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Position of the label relative to the radio button.\nCan be 'left' or 'right'."
+        },
+        "attribute": "position",
+        "reflect": true,
+        "defaultValue": "'left'"
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value associated with the radio button."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name attribute of the radio button."
+        },
+        "attribute": "name",
+        "reflect": true,
+        "defaultValue": "''"
+      },
+      "background": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'dark' | 'light'",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Background theme of the radio button.\nCan be 'dark' or 'light'."
+        },
+        "attribute": "background",
+        "reflect": false,
+        "defaultValue": "'light'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the radio button.\nCan be 'small', 'medium', or 'large'."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'medium'"
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Color theme of the radio button."
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "'accent'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "styles": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "onchange",
+        "name": "onchange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ value: string, checked: boolean }",
+          "resolved": "{ value: string; checked: boolean; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "size",
+        "methodName": "sizeHandler"
+      }, {
+        "propName": "color",
+        "methodName": "setColors"
+      }, {
+        "propName": "background",
+        "methodName": "setColors"
+      }, {
+        "propName": "background",
+        "methodName": "assignColor"
+      }];
+  }
+}
+//# sourceMappingURL=cura-radio.js.map