tuix-webcomponents 0.1.0 → 0.3.0

package/dist/src/tuix-input/TuixInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixInput.styles.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,MAAM,SAAS,GAAG;IAChB,IAAI,EAAE,MAAM;IACZ,eAAe,EAAE,QAAQ;IACzB,cAAc,EAAE,MAAM;IACtB,QAAQ,EAAE,SAAS;CACpB,CAAC;AAEF,MAAM,iBAAiB,GAAG,QAAQ,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;AAC3D,MAAM,YAAY,GAAG,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAEjD,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;4BAED,SAAS,CAAC,OAAO,CAAC,UAAU,CAAC;6BAC5B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;4BAC/B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;mCAChB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC7B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;oCAC9B,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;qCACtB,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;yCAC1B,SAAS,CAAC,OAAO,CAAC,cAAc,CAAC;qCACrC,SAAS,CAAC,OAAO,CAAC,aAAa,CAAC;sCAC/B,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;gCACpC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC;oCACvB,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC;;;;4BAIpC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;4BAClC,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;mCAC3B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;oCACjC,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;qCAC/B,SAAS,CAAC,WAAW,CAAC,WAAW,CAAC;yCAC9B,SAAS,CAAC,WAAW,CAAC,cAAc,CAAC;;QAEtE,iBAAiB,CAAC,CAAC;QACnB,iBAAiB,CAAC,CAAC;QACnB,iBAAiB,CAAC,CAAC;;;;QAInB,YAAY,CAAC,CAAC;QACd,YAAY,CAAC,CAAC;QACd,YAAY,CAAC,CAAC;;;oCAGc,SAAS,CAAC,WAAW,CAAC,SAAS,CAAC;;CAEnE,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;QAI/B,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC;UACrE,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;;;QAG3B,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,SAAS,CAAC,SAAS,CAAC,cAAc,CAAC;UACpE,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;;;;oBAIf,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC;;;;;;;;;;;;uCAYV,WAAW,CAAC,MAAM;;;;;;;;;;;;;uCAalB,WAAW,CAAC,MAAM;;;;;;;;;;;;;CAaxD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;uCAQK,WAAW,CAAC,MAAM;;;;;;;;;;uCAUlB,WAAW,CAAC,MAAM;;;;;;;;;CASxD,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoClC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;uCAuBI,WAAW,CAAC,MAAM;;;;;;;;;;;;;uCAalB,WAAW,CAAC,MAAM;;;;;;;;;CASxD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;cAKpB,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC;aACrC,SAAS,CAAC,SAAS,CAAC,eAAe,CAAC;;;;;aAKpC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC;;;;;;YAM9B,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCA4BF,WAAW,CAAC,MAAM;;gBAEzC,SAAS,CAAC,SAAS,CAAC,cAAc,CAAC;eACpC,SAAS,CAAC,SAAS,CAAC,cAAc,CAAC;;;CAGjD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;uCAOG,WAAW,CAAC,MAAM;;;;;;;;;;;;;;CAcxD,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;CAiBxC,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { palette } from '../utils/colors';\nimport { darkPalette } from '../utils/darkColors';\nimport { hexToRgb } from '../utils/hex-rgb';\n\nconst inputVars = {\n  gapX: '10px',\n  iconDesktopSize: '1.5rem',\n  iconTabletSize: '1rem',\n  paddingX: '1.25rem',\n};\n\nconst rgbDarkValidation = hexToRgb(darkPalette.validation);\nconst rgbDarkError = hexToRgb(darkPalette.error);\n\nexport const hostStyles = css`\n  :host {\n    --t-field-color-form: ${unsafeCSS(palette.primary_50)};\n    --t-field-color-title: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-text: ${unsafeCSS(palette.dark)};\n    --t-field-color-description: ${unsafeCSS(palette.neutral_600)};\n    --t-field-color-stroke-hover: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-stroke-focus: ${unsafeCSS(palette.main)};\n    --t-field-color-text-disabled: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-stroke-validation: ${unsafeCSS(palette.validation_200)};\n    --t-field-color-bg-validation: ${unsafeCSS(palette.validation_50)};\n    --t-field-color-stroke-loading: ${unsafeCSS(palette.primary_300)};\n    --t-field-color-bg-error: ${unsafeCSS(palette.error_50)};\n    --t-field-color-stroke-error: ${unsafeCSS(palette.error_200)};\n    --t-field-input-cursor: auto;\n  }\n  :host([dark]) {\n    --t-field-color-form: ${unsafeCSS(darkPalette.primary_950)};\n    --t-field-color-text: ${unsafeCSS(darkPalette.primary_100)};\n    --t-field-color-description: ${unsafeCSS(darkPalette.neutral_200)};\n    --t-field-color-stroke-focus: ${unsafeCSS(darkPalette.secondary)};\n    --t-field-color-text-disabled: ${unsafeCSS(darkPalette.primary_800)};\n    --t-field-color-stroke-validation: ${unsafeCSS(darkPalette.validation_200)};\n    --t-field-color-bg-validation: rgba(\n      ${rgbDarkValidation.r},\n      ${rgbDarkValidation.g},\n      ${rgbDarkValidation.b},\n      0.2\n    );\n    --t-field-color-bg-error: rgba(\n      ${rgbDarkError.r},\n      ${rgbDarkError.g},\n      ${rgbDarkError.b},\n      0.2\n    );\n    --t-field-color-stroke-error: ${unsafeCSS(darkPalette.error_200)};\n  }\n`;\n\nexport const inputComponentStyles = css`\n  .t-input-container {\n    position: relative;\n    --t-padding-x-desktop-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconDesktopSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n    --t-padding-x-tablet-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconTabletSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n  }\n  .t-input {\n    padding: 1rem ${unsafeCSS(inputVars.paddingX)};\n    border-radius: 4px;\n    font-family: 'rubik', sans-serif;\n    cursor: var(--t-field-input-cursor);\n  }\n  .t-input.with-title {\n    padding-top: 1.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .t-input.with-icon-right {\n    padding-right: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input {\n      padding-top: 0.875rem;\n      padding-bottom: 0.875rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.375rem;\n      padding-bottom: 0.375rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      padding-top: 0.75rem;\n      padding-bottom: 0.75rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.25rem;\n      padding-bottom: 0.25rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n`;\n\nexport const inputFontStyles = css`\n  .t-input::placeholder,\n  .t-input,\n  .t-title {\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input::placeholder {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    .t-input::placeholder {\n      line-height: 1rem;\n    }\n  }\n`;\n\nexport const inputColorStyles = css`\n  .t-input {\n    background-color: var(--t-field-color-form);\n    border: 1px solid var(--t-field-color-form);\n    color: var(--t-field-color-text);\n  }\n  .t-input-container:hover .t-input,\n  .t-input:hover {\n    border: 1px solid var(--t-field-color-stroke-hover);\n  }\n  .t-input:focus {\n    border: 1px solid var(--t-field-color-stroke-focus);\n    outline: 1px solid var(--t-field-color-stroke-focus);\n  }\n  .t-input[disabled] {\n    pointer-events: none;\n    color: var(--t-field-color-text-disabled);\n  }\n  .t-input.with-title::placeholder {\n    color: transparent;\n  }\n  .t-input::placeholder,\n  .t-input.with-title:focus::placeholder {\n    color: var(--t-field-color-title);\n  }\n  .t-input.with-warning {\n    border: 1px solid var(--t-field-color-stroke-validation);\n    background-color: var(--t-field-color-bg-validation);\n  }\n  .t-input.with-error {\n    border: 1px solid var(--t-field-color-stroke-error);\n    background-color: var(--t-field-color-bg-error);\n  }\n  .t-input.with-loading {\n    border: 1px solid var(--t-field-color-stroke-loading);\n  }\n`;\n\nexport const inputTitleStyles = css`\n  .t-title {\n    position: absolute;\n    top: 50%;\n    left: 1.25rem;\n    font-family: 'rubik', sans-serif;\n    color: var(--t-field-color-title);\n    transform: translateY(-50%);\n    transition-duration: 0.3s;\n    pointer-events: none;\n  }\n  .t-textarea-container .t-title {\n    top: 1rem;\n    transform: none;\n  }\n  .t-input.with-title:focus + .t-title,\n  .t-input.with-title:not(:placeholder-shown) + .t-title {\n    font-size: 0.75rem;\n    font-weight: 400;\n    line-height: 1rem;\n    transform: translateY(0);\n    top: 0.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-title {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.375rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.875rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.25rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.75rem;\n    }\n  }\n`;\n\nexport const inputIconStyles = css`\n  .t-icon-set-container.t-icon-click {\n    cursor: pointer;\n  }\n  .t-input-container .t-icon-set-container {\n    height: ${unsafeCSS(inputVars.iconDesktopSize)};\n    width: ${unsafeCSS(inputVars.iconDesktopSize)};\n  }\n  .t-input-container .t-icon-set-container.t-icon-right {\n    position: absolute;\n    top: 50%;\n    right: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-input-container .t-icon-set-container.t-icon-left {\n    position: absolute;\n    top: 50%;\n    left: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-icon-inactive {\n    display: inline;\n  }\n  .t-icon-active {\n    display: none;\n  }\n  .t-icon-disabled {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-inactive,\n  .t-input:hover ~ .t-icon-set-container .t-icon-inactive,\n  .t-input:focus ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-active,\n  .t-input:hover ~ .t-icon-set-container .t-icon-active,\n  .t-input:focus ~ .t-icon-set-container .t-icon-active {\n    display: inline;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {\n    display: inline;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input-container .t-icon-set-container {\n      height: ${unsafeCSS(inputVars.iconTabletSize)};\n      width: ${unsafeCSS(inputVars.iconTabletSize)};\n    }\n  }\n`;\n\nexport const inputSearchStyles = css`\n  .t-input[type='search'] {\n    padding-left: var(--t-padding-x-desktop-with-icon);\n  }\n  .t-input[type='search'] + .t-title {\n    left: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input[type='search'] {\n      padding-left: var(--t-padding-x-tablet-with-icon);\n    }\n    .t-input[type='search'] + .t-title {\n      left: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  input[type='search']::-webkit-search-decoration,\n  input[type='search']::-webkit-search-cancel-button,\n  input[type='search']::-webkit-search-results-button,\n  input[type='search']::-webkit-search-results-decoration {\n    display: none;\n  }\n`;\n\nexport const inputDescriptionStyles = css`\n  .t-input-description-container {\n    margin-top: 0.5rem;\n    font-family: 'rubik', sans-serif;\n    font-size: 0.75rem;\n    line-height: 1rem;\n    color: var(--t-field-color-description);\n    display: flex;\n    justify-content: space-between;\n  }\n  .t-input-description-container .t-letter-counter {\n    align-self: flex-end;\n  }\n  .t-input-description-container .t-input-description {\n    display: flex;\n    gap: 0.5rem;\n  }\n`;\n"]}
+{"version":3,"file":"TuixInput.styles.js","sourceRoot":"","sources":["../../../src/tuix-input/TuixInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { Palette } from '../utils/colors';\nimport { DarkPalette } from '../utils/darkColors';\nimport { hexToRgb } from '../utils/hex-rgb';\n\nconst inputVars = {\n  gapX: '10px',\n  iconDesktopSize: '1.5rem',\n  iconTabletSize: '1rem',\n  paddingX: '1.25rem',\n};\n\nconst rgbDarkValidation = hexToRgb(DarkPalette.VALIDATION);\nconst rgbDarkError = hexToRgb(DarkPalette.ERROR);\n\nexport const hostStyles = css`\n  :host {\n    --t-field-color-form: ${unsafeCSS(Palette.PRIMARY_50)};\n    --t-field-color-title: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-text: ${unsafeCSS(Palette.BLACK)};\n    --t-field-color-description: ${unsafeCSS(Palette.NEUTRAL_600)};\n    --t-field-color-stroke-hover: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-stroke-focus: ${unsafeCSS(Palette.MAIN)};\n    --t-field-color-text-disabled: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-stroke-validation: ${unsafeCSS(Palette.VALIDATION_200)};\n    --t-field-color-bg-validation: ${unsafeCSS(Palette.VALIDATION_50)};\n    --t-field-color-stroke-loading: ${unsafeCSS(Palette.PRIMARY_300)};\n    --t-field-color-bg-error: ${unsafeCSS(Palette.ERROR_50)};\n    --t-field-color-stroke-error: ${unsafeCSS(Palette.ERROR_200)};\n    --t-field-input-cursor: auto;\n  }\n  :host([dark]) {\n    --t-field-color-form: ${unsafeCSS(DarkPalette.PRIMARY_950)};\n    --t-field-color-text: ${unsafeCSS(DarkPalette.PRIMARY_100)};\n    --t-field-color-description: ${unsafeCSS(DarkPalette.NEUTRAL_200)};\n    --t-field-color-stroke-focus: ${unsafeCSS(DarkPalette.SECONDARY)};\n    --t-field-color-text-disabled: ${unsafeCSS(DarkPalette.PRIMARY_800)};\n    --t-field-color-stroke-validation: ${unsafeCSS(DarkPalette.VALIDATION_200)};\n    --t-field-color-bg-validation: rgba(\n      ${rgbDarkValidation.r},\n      ${rgbDarkValidation.g},\n      ${rgbDarkValidation.b},\n      0.2\n    );\n    --t-field-color-bg-error: rgba(\n      ${rgbDarkError.r},\n      ${rgbDarkError.g},\n      ${rgbDarkError.b},\n      0.2\n    );\n    --t-field-color-stroke-error: ${unsafeCSS(DarkPalette.ERROR_200)};\n  }\n`;\n\nexport const inputComponentStyles = css`\n  .t-input-container {\n    position: relative;\n    --t-padding-x-desktop-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconDesktopSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n    --t-padding-x-tablet-with-icon: calc(\n      ${unsafeCSS(inputVars.paddingX)} + ${unsafeCSS(inputVars.iconTabletSize)} +\n        ${unsafeCSS(inputVars.gapX)}\n    );\n  }\n  .t-input {\n    padding: 1rem ${unsafeCSS(inputVars.paddingX)};\n    border-radius: 4px;\n    font-family: 'rubik', sans-serif;\n    cursor: var(--t-field-input-cursor);\n    width: 100%;\n    box-sizing: border-box;\n  }\n  .t-input.with-title {\n    padding-top: 1.5rem;\n    padding-bottom: 0.5rem;\n  }\n  .t-input.with-icon-right {\n    padding-right: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input {\n      padding-top: 0.875rem;\n      padding-bottom: 0.875rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.375rem;\n      padding-bottom: 0.375rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      padding-top: 0.75rem;\n      padding-bottom: 0.75rem;\n    }\n    .t-input.with-title {\n      padding-top: 1.25rem;\n      padding-bottom: 0.25rem;\n    }\n    .t-input.with-icon-right {\n      padding-right: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n`;\n\nexport const inputFontStyles = css`\n  .t-input::placeholder,\n  .t-input,\n  .t-title {\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input::placeholder {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input {\n      font-size: 1rem;\n      line-height: 1.25rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input {\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    .t-input::placeholder {\n      line-height: 1rem;\n    }\n  }\n`;\n\nexport const inputColorStyles = css`\n  .t-input {\n    background-color: var(--t-field-color-form);\n    border: 1px solid var(--t-field-color-form);\n    color: var(--t-field-color-text);\n  }\n  .t-input-container:hover .t-input,\n  .t-input:hover {\n    border: 1px solid var(--t-field-color-stroke-hover);\n  }\n  .t-input:focus {\n    border: 1px solid var(--t-field-color-stroke-focus);\n    outline: 1px solid var(--t-field-color-stroke-focus);\n  }\n  .t-input[disabled]:disabled {\n    cursor: not-allowed;\n    border: none;\n    color: var(--t-field-color-text-disabled);\n  }\n  .t-input.with-title::placeholder {\n    color: transparent;\n  }\n  .t-input::placeholder,\n  .t-input.with-title:focus::placeholder {\n    color: var(--t-field-color-title);\n  }\n  .t-input.with-warning {\n    border: 1px solid var(--t-field-color-stroke-validation);\n    background-color: var(--t-field-color-bg-validation);\n  }\n  .t-input.with-error {\n    border: 1px solid var(--t-field-color-stroke-error);\n    background-color: var(--t-field-color-bg-error);\n  }\n  .t-input.with-loading {\n    border: 1px solid var(--t-field-color-stroke-loading);\n  }\n`;\n\nexport const inputTitleStyles = css`\n  .t-title {\n    position: absolute;\n    top: 50%;\n    left: 1.25rem;\n    font-family: 'rubik', sans-serif;\n    color: var(--t-field-color-title);\n    transform: translateY(-50%);\n    transition-duration: 0.3s;\n    pointer-events: none;\n    -webkit-user-select: none;\n    -moz-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n  }\n  .t-textarea-container .t-title {\n    top: 1rem;\n    transform: none;\n  }\n  .t-input.with-title:focus + .t-title,\n  .t-input.with-title:not(:placeholder-shown) + .t-title {\n    font-size: 0.75rem;\n    font-weight: 400;\n    line-height: 1rem;\n    transform: translateY(0);\n    top: 0.5rem;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-title {\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n    }\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.375rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.875rem;\n    }\n  }\n  @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {\n    .t-input.with-title:focus + .t-title,\n    .t-input.with-title:not(:placeholder-shown) + .t-title {\n      top: 0.25rem;\n    }\n    .t-textarea-container .t-title {\n      top: 0.75rem;\n    }\n  }\n`;\n\nexport const inputIconStyles = css`\n  .t-input-container .t-icon-set-container {\n    height: ${unsafeCSS(inputVars.iconDesktopSize)};\n    width: ${unsafeCSS(inputVars.iconDesktopSize)};\n    cursor: var(--t-field-input-cursor);\n  }\n  .t-icon-set-container.t-icon-click {\n    cursor: pointer;\n  }\n  .t-input-container .t-icon-set-container.t-icon-right {\n    position: absolute;\n    top: 50%;\n    right: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-input-container .t-icon-set-container.t-icon-left {\n    position: absolute;\n    top: 50%;\n    left: ${unsafeCSS(inputVars.paddingX)};\n    transform: translateY(-50%);\n  }\n  .t-icon-inactive {\n    display: inline;\n  }\n  .t-icon-active {\n    display: none;\n  }\n  .t-icon-disabled {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-inactive,\n  .t-input:hover ~ .t-icon-set-container .t-icon-inactive,\n  .t-input:focus ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input-container:hover .t-icon-set-container .t-icon-active,\n  .t-input:hover ~ .t-icon-set-container .t-icon-active,\n  .t-input:focus ~ .t-icon-set-container .t-icon-active {\n    display: inline;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-active {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-inactive {\n    display: none;\n  }\n  .t-input[disabled] ~ .t-icon-set-container .t-icon-disabled {\n    display: inline;\n    cursor: not-allowed;\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input-container .t-icon-set-container {\n      height: ${unsafeCSS(inputVars.iconTabletSize)};\n      width: ${unsafeCSS(inputVars.iconTabletSize)};\n    }\n  }\n`;\n\nexport const inputSearchStyles = css`\n  .t-input[type='search'] {\n    padding-left: var(--t-padding-x-desktop-with-icon);\n  }\n  .t-input[type='search'] + .t-title {\n    left: var(--t-padding-x-desktop-with-icon);\n  }\n  @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n    .t-input[type='search'] {\n      padding-left: var(--t-padding-x-tablet-with-icon);\n    }\n    .t-input[type='search'] + .t-title {\n      left: var(--t-padding-x-tablet-with-icon);\n    }\n  }\n  input[type='search']::-webkit-search-decoration,\n  input[type='search']::-webkit-search-cancel-button,\n  input[type='search']::-webkit-search-results-button,\n  input[type='search']::-webkit-search-results-decoration {\n    display: none;\n  }\n`;\n\nexport const inputDescriptionStyles = css`\n  .t-input-description-container {\n    margin-top: 0.5rem;\n    font-family: 'rubik', sans-serif;\n    font-size: 0.75rem;\n    line-height: 1rem;\n    color: var(--t-field-color-description);\n    display: flex;\n    justify-content: space-between;\n  }\n  .t-input-description-container .t-letter-counter {\n    align-self: flex-end;\n  }\n  .t-input-description-container .t-input-description {\n    display: flex;\n    gap: 0.5rem;\n  }\n`;\n"]}

package/dist/src/tuix-input/enums/tuix-input.enums.d.ts

@@ -1,4 +1,6 @@
 import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
+import { Palette } from '../../utils/colors';
+import { DarkPalette } from '../../utils/darkColors';
 export declare enum InputType {
     TEXT = "text",
     SEARCH = "search",
@@ -23,14 +25,14 @@ export declare const IconByDescriptionType: {
     loading: IconName;
 };
 export declare const IconDescriptionColorLight: {
-    warning: string;
-    error: string;
-    success: string;
-    loading: string;
+    warning: Palette;
+    error: Palette;
+    success: Palette;
+    loading: Palette;
 };
 export declare const IconDescriptionColorDark: {
-    warning: string;
-    error: string;
-    success: string;
-    loading: string;
+    warning: DarkPalette;
+    error: DarkPalette;
+    success: DarkPalette;
+    loading: DarkPalette;
 };

package/dist/src/tuix-input/enums/tuix-input.enums.js

@@ -1,6 +1,6 @@
 import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
-import { palette } from '../../utils/colors';
-import { darkPalette } from '../../utils/darkColors';
+import { Palette } from '../../utils/colors';
+import { DarkPalette } from '../../utils/darkColors';
 export var InputType;
 (function (InputType) {
     InputType["TEXT"] = "text";
@@ -28,15 +28,15 @@ export const IconByDescriptionType = {
     [DescriptionType.LOADING]: IconName.LOADER,
 };
 export const IconDescriptionColorLight = {
-    [DescriptionType.WARNING]: palette.validation,
-    [DescriptionType.ERROR]: palette.error,
-    [DescriptionType.SUCCESS]: palette.success,
-    [DescriptionType.LOADING]: palette.primary_300,
+    [DescriptionType.WARNING]: Palette.VALIDATION,
+    [DescriptionType.ERROR]: Palette.ERROR,
+    [DescriptionType.SUCCESS]: Palette.SUCCESS,
+    [DescriptionType.LOADING]: Palette.PRIMARY_300,
 };
 export const IconDescriptionColorDark = {
-    [DescriptionType.WARNING]: darkPalette.validation,
-    [DescriptionType.ERROR]: darkPalette.error,
-    [DescriptionType.SUCCESS]: darkPalette.success,
-    [DescriptionType.LOADING]: darkPalette.primary_300,
+    [DescriptionType.WARNING]: DarkPalette.VALIDATION,
+    [DescriptionType.ERROR]: DarkPalette.ERROR,
+    [DescriptionType.SUCCESS]: DarkPalette.SUCCESS,
+    [DescriptionType.LOADING]: DarkPalette.PRIMARY_300,
 };
 //# sourceMappingURL=tuix-input.enums.js.map

package/dist/src/tuix-input/enums/tuix-input.enums.js.map

@@ -1 +1 @@
-{"version":3,"file":"tuix-input.enums.js","sourceRoot":"","sources":["../../../../src/tuix-input/enums/tuix-input.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,8BAAiB,CAAA;IACjB,kCAAqB,CAAA;IACrB,mCAAsB,CAAA;AACxB,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAED,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,kCAAa,CAAA;IACb,oCAAe,CAAA;AACjB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAN,IAAY,eAMX;AAND,WAAY,eAAe;IACzB,gCAAa,CAAA;IACb,sCAAmB,CAAA;IACnB,kCAAe,CAAA;IACf,sCAAmB,CAAA;IACnB,sCAAmB,CAAA;AACrB,CAAC,EANW,eAAe,KAAf,eAAe,QAM1B;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,oBAAoB;IACxD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,QAAQ;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,YAAY;IAChD,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,MAAM;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU;IAC7C,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK;IACtC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU;IACjD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO;IAC9C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW;CACnD,CAAC","sourcesContent":["import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';\nimport { palette } from '../../utils/colors';\nimport { darkPalette } from '../../utils/darkColors';\n\nexport enum InputType {\n  TEXT = 'text',\n  SEARCH = 'search',\n  PASSWORD = 'password',\n  TEXT_AREA = 'textarea',\n}\n\nexport enum InputIconLocation {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nexport enum DescriptionType {\n  TEXT = 'text',\n  WARNING = 'warning',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  LOADING = 'loading',\n}\n\nexport const IconByDescriptionType = {\n  [DescriptionType.WARNING]: IconName.TRIANGLE_EXCLAMATION,\n  [DescriptionType.ERROR]: IconName.CIRCLE_X,\n  [DescriptionType.SUCCESS]: IconName.CIRCLE_CHECK,\n  [DescriptionType.LOADING]: IconName.LOADER,\n};\n\nexport const IconDescriptionColorLight = {\n  [DescriptionType.WARNING]: palette.validation,\n  [DescriptionType.ERROR]: palette.error,\n  [DescriptionType.SUCCESS]: palette.success,\n  [DescriptionType.LOADING]: palette.primary_300,\n};\n\nexport const IconDescriptionColorDark = {\n  [DescriptionType.WARNING]: darkPalette.validation,\n  [DescriptionType.ERROR]: darkPalette.error,\n  [DescriptionType.SUCCESS]: darkPalette.success,\n  [DescriptionType.LOADING]: darkPalette.primary_300,\n};\n"]}
+{"version":3,"file":"tuix-input.enums.js","sourceRoot":"","sources":["../../../../src/tuix-input/enums/tuix-input.enums.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uCAAuC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAErD,MAAM,CAAN,IAAY,SAKX;AALD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,8BAAiB,CAAA;IACjB,kCAAqB,CAAA;IACrB,mCAAsB,CAAA;AACxB,CAAC,EALW,SAAS,KAAT,SAAS,QAKpB;AAED,MAAM,CAAN,IAAY,iBAGX;AAHD,WAAY,iBAAiB;IAC3B,kCAAa,CAAA;IACb,oCAAe,CAAA;AACjB,CAAC,EAHW,iBAAiB,KAAjB,iBAAiB,QAG5B;AAED,MAAM,CAAN,IAAY,eAMX;AAND,WAAY,eAAe;IACzB,gCAAa,CAAA;IACb,sCAAmB,CAAA;IACnB,kCAAe,CAAA;IACf,sCAAmB,CAAA;IACnB,sCAAmB,CAAA;AACrB,CAAC,EANW,eAAe,KAAf,eAAe,QAM1B;AAED,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,oBAAoB;IACxD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,QAAQ;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,YAAY;IAChD,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC,MAAM;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,UAAU;IAC7C,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK;IACtC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,OAAO;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,WAAW;CAC/C,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,UAAU;IACjD,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE,WAAW,CAAC,KAAK;IAC1C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO;IAC9C,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,WAAW;CACnD,CAAC","sourcesContent":["import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';\nimport { Palette } from '../../utils/colors';\nimport { DarkPalette } from '../../utils/darkColors';\n\nexport enum InputType {\n  TEXT = 'text',\n  SEARCH = 'search',\n  PASSWORD = 'password',\n  TEXT_AREA = 'textarea',\n}\n\nexport enum InputIconLocation {\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nexport enum DescriptionType {\n  TEXT = 'text',\n  WARNING = 'warning',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  LOADING = 'loading',\n}\n\nexport const IconByDescriptionType = {\n  [DescriptionType.WARNING]: IconName.TRIANGLE_EXCLAMATION,\n  [DescriptionType.ERROR]: IconName.CIRCLE_X,\n  [DescriptionType.SUCCESS]: IconName.CIRCLE_CHECK,\n  [DescriptionType.LOADING]: IconName.LOADER,\n};\n\nexport const IconDescriptionColorLight = {\n  [DescriptionType.WARNING]: Palette.VALIDATION,\n  [DescriptionType.ERROR]: Palette.ERROR,\n  [DescriptionType.SUCCESS]: Palette.SUCCESS,\n  [DescriptionType.LOADING]: Palette.PRIMARY_300,\n};\n\nexport const IconDescriptionColorDark = {\n  [DescriptionType.WARNING]: DarkPalette.VALIDATION,\n  [DescriptionType.ERROR]: DarkPalette.ERROR,\n  [DescriptionType.SUCCESS]: DarkPalette.SUCCESS,\n  [DescriptionType.LOADING]: DarkPalette.PRIMARY_300,\n};\n"]}

package/dist/src/tuix-input/interfaces/tuix-input.interface.d.ts

@@ -1,4 +1,5 @@
 import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';
+import { DetailValue } from '../../utils/interfaces/detail-value.interface';
 import { InputIconLocation } from '../enums/tuix-input.enums';
 export interface InputIconColors {
     inactive: string;
@@ -11,3 +12,4 @@ export interface FormatIconSetParams {
     location?: InputIconLocation;
     clickHandler?: (e: MouseEvent) => void;
 }
+export type CustomEventTuixInput = CustomEvent<DetailValue<string>>;

package/dist/src/tuix-input/interfaces/tuix-input.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"tuix-input.interface.js","sourceRoot":"","sources":["../../../../src/tuix-input/interfaces/tuix-input.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';\nimport { InputIconLocation } from '../enums/tuix-input.enums';\n\nexport interface InputIconColors {\n  inactive: string;\n  active: string;\n  disabled: string;\n}\n\nexport interface FormatIconSetParams {\n  iconName: IconName;\n  colorByState: InputIconColors;\n  location?: InputIconLocation;\n  clickHandler?: (e: MouseEvent) => void;\n}\n"]}
+{"version":3,"file":"tuix-input.interface.js","sourceRoot":"","sources":["../../../../src/tuix-input/interfaces/tuix-input.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { IconName } from '../../tuix-icon/enums/tuix-icon.enums';\nimport { DetailValue } from '../../utils/interfaces/detail-value.interface';\nimport { InputIconLocation } from '../enums/tuix-input.enums';\n\nexport interface InputIconColors {\n  inactive: string;\n  active: string;\n  disabled: string;\n}\n\nexport interface FormatIconSetParams {\n  iconName: IconName;\n  colorByState: InputIconColors;\n  location?: InputIconLocation;\n  clickHandler?: (e: MouseEvent) => void;\n}\n\nexport type CustomEventTuixInput = CustomEvent<DetailValue<string>>;\n"]}

package/dist/src/tuix-link/TuixLink.d.ts

@@ -7,5 +7,7 @@ export declare class TuixLink extends LitElement {
     target: LinkTarget;
     variant: MainVariant;
     disabled: boolean;
+    dark: boolean;
+    private _getOptionalClasses;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/tuix-link/TuixLink.js

@@ -1,23 +1,32 @@
 import { __decorate } from "tslib";
 import { html, css, LitElement, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { palette } from '../utils/colors';
+import { Palette } from '../utils/colors';
 import { ScreenSizes } from '../utils/screenSizes.enum';
 import { MainVariant } from '../utils/mainVariant.enum';
 import { LinkTarget } from './enums/linkTarget.enum';
+import { classMap } from 'lit/directives/class-map.js';
 let TuixLink = class TuixLink extends LitElement {
     constructor() {
         super(...arguments);
         this.href = '';
-        this.target = LinkTarget.Blank;
+        this.target = LinkTarget.BLANK;
         this.variant = MainVariant.PRIMARY;
         this.disabled = false;
+        this.dark = false;
+    }
+    _getOptionalClasses() {
+        return {
+            link: true,
+            disabled: this.disabled,
+            [MainVariant.SECONDARY]: this.dark || this.variant === MainVariant.SECONDARY,
+        };
     }
     render() {
         return html `
       <a
-        target="${this.disabled ? LinkTarget.Self : this.target}"
-        class="link ${this.variant} ${this.disabled ? 'disabled' : ''}"
+        target="${this.disabled ? LinkTarget.SELF : this.target}"
+        class="${classMap(this._getOptionalClasses())}"
         href="${this.disabled ? 'javascript:void(0)' : this.href}"
       >
         <slot></slot>
@@ -32,13 +41,13 @@ TuixLink.styles = css `
       font-weight: 400;
       line-height: 1.25rem;
       text-decoration: none;
-      color: ${unsafeCSS(palette.main)};
+      color: ${unsafeCSS(Palette.MAIN)};
     }
     a.link:hover {
       text-decoration: underline;
     }
     a.link.secondary {
-      color: ${unsafeCSS(palette.white)};
+      color: ${unsafeCSS(Palette.WHITE)};
     }
     @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
       a.link {
@@ -49,7 +58,7 @@ TuixLink.styles = css `
     }
     a.link.disabled {
       text-decoration: underline;
-      color: ${unsafeCSS(palette.primary_300)};
+      color: ${unsafeCSS(Palette.PRIMARY_300)};
       cursor: not-allowed;
     }
   `;
@@ -63,8 +72,11 @@ __decorate([
     property({ type: MainVariant })
 ], TuixLink.prototype, "variant", void 0);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], TuixLink.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixLink.prototype, "dark", void 0);
 TuixLink = __decorate([
     customElement('tuix-link')
 ], TuixLink);

package/dist/src/tuix-link/TuixLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixLink.js","sourceRoot":"","sources":["../../../src/tuix-link/TuixLink.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QA+BE,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAG,UAAU,CAAC,KAAK,CAAC;QAG1B,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;IAanB,CAAC;IAXC,MAAM;QACJ,OAAO,IAAI,CAAA;;kBAEG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM;sBACzC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;gBACrD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;;;;KAI3D,CAAC;IACJ,CAAC;;AAnDM,eAAM,GAAG,GAAG,CAAA;;;;;;;eAON,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;;;eAMvB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;yCAEE,WAAW,CAAC,MAAM;;;;;;;;;eAS5C,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;GAG1C,AA3BY,CA2BX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;wCACL;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;yCACF;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CACX;AAxCN,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAqDpB;SArDY,QAAQ","sourcesContent":["import { html, css, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { LinkTarget } from './enums/linkTarget.enum';\n\n@customElement('tuix-link')\nexport class TuixLink extends LitElement {\n  static styles = css`\n    a.link {\n      font-family: 'rubik', sans-serif;\n      font-size: 1rem;\n      font-weight: 400;\n      line-height: 1.25rem;\n      text-decoration: none;\n      color: ${unsafeCSS(palette.main)};\n    }\n    a.link:hover {\n      text-decoration: underline;\n    }\n    a.link.secondary {\n      color: ${unsafeCSS(palette.white)};\n    }\n    @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n      a.link {\n        font-size: 0.875rem;\n        font-weight: 400;\n        line-height: 1rem;\n      }\n    }\n    a.link.disabled {\n      text-decoration: underline;\n      color: ${unsafeCSS(palette.primary_300)};\n      cursor: not-allowed;\n    }\n  `;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: LinkTarget })\n  target = LinkTarget.Blank;\n\n  @property({ type: MainVariant })\n  variant = MainVariant.PRIMARY;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  render() {\n    return html`\n      <a\n        target=\"${this.disabled ? LinkTarget.Self : this.target}\"\n        class=\"link ${this.variant} ${this.disabled ? 'disabled' : ''}\"\n        href=\"${this.disabled ? 'javascript:void(0)' : this.href}\"\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"TuixLink.js","sourceRoot":"","sources":["../../../src/tuix-link/TuixLink.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGlE,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAAxC;;QA+BE,SAAI,GAAG,EAAE,CAAC;QAGV,WAAM,GAAG,UAAU,CAAC,KAAK,CAAC;QAG1B,YAAO,GAAG,WAAW,CAAC,OAAO,CAAC;QAG9B,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;IAsBf,CAAC;IApBS,mBAAmB;QACzB,OAAO;YACL,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,CAAC,SAAS;SACtD,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;kBAEG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM;iBAC9C,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;gBACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;;;;KAI3D,CAAC;IACJ,CAAC;;AA/DM,eAAM,GAAG,GAAG,CAAA;;;;;;;eAON,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC;;;;;;eAMvB,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC;;yCAEE,WAAW,CAAC,MAAM;;;;;;;;;eAS5C,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC;;;GAG1C,AA3BY,CA2BX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACjB;AAGV;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC;wCACL;AAG1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;yCACF;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAC9B;AA3CF,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiEpB;SAjEY,QAAQ","sourcesContent":["import { html, css, LitElement, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { Palette } from '../utils/colors';\nimport { ScreenSizes } from '../utils/screenSizes.enum';\nimport { MainVariant } from '../utils/mainVariant.enum';\nimport { LinkTarget } from './enums/linkTarget.enum';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\n@customElement('tuix-link')\nexport class TuixLink extends LitElement {\n  static styles = css`\n    a.link {\n      font-family: 'rubik', sans-serif;\n      font-size: 1rem;\n      font-weight: 400;\n      line-height: 1.25rem;\n      text-decoration: none;\n      color: ${unsafeCSS(Palette.MAIN)};\n    }\n    a.link:hover {\n      text-decoration: underline;\n    }\n    a.link.secondary {\n      color: ${unsafeCSS(Palette.WHITE)};\n    }\n    @media only screen and (max-width: ${ScreenSizes.TABLET}px) {\n      a.link {\n        font-size: 0.875rem;\n        font-weight: 400;\n        line-height: 1rem;\n      }\n    }\n    a.link.disabled {\n      text-decoration: underline;\n      color: ${unsafeCSS(Palette.PRIMARY_300)};\n      cursor: not-allowed;\n    }\n  `;\n\n  @property({ type: String })\n  href = '';\n\n  @property({ type: LinkTarget })\n  target = LinkTarget.BLANK;\n\n  @property({ type: MainVariant })\n  variant = MainVariant.PRIMARY;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  private _getOptionalClasses(): ClassInfo {\n    return {\n      link: true,\n      disabled: this.disabled,\n      [MainVariant.SECONDARY]:\n        this.dark || this.variant === MainVariant.SECONDARY,\n    };\n  }\n\n  render() {\n    return html`\n      <a\n        target=\"${this.disabled ? LinkTarget.SELF : this.target}\"\n        class=\"${classMap(this._getOptionalClasses())}\"\n        href=\"${this.disabled ? 'javascript:void(0)' : this.href}\"\n      >\n        <slot></slot>\n      </a>\n    `;\n  }\n}\n"]}

package/dist/src/tuix-link/enums/linkTarget.enum.d.ts

@@ -1,6 +1,6 @@
 export declare enum LinkTarget {
-    Blank = "_blank",
-    Self = "_self",
-    Parent = "_parent",
-    Top = "_top"
+    BLANK = "_blank",
+    SELF = "_self",
+    PARENT = "_parent",
+    TOP = "_top"
 }

package/dist/src/tuix-link/enums/linkTarget.enum.js

@@ -1,8 +1,8 @@
 export var LinkTarget;
 (function (LinkTarget) {
-    LinkTarget["Blank"] = "_blank";
-    LinkTarget["Self"] = "_self";
-    LinkTarget["Parent"] = "_parent";
-    LinkTarget["Top"] = "_top";
+    LinkTarget["BLANK"] = "_blank";
+    LinkTarget["SELF"] = "_self";
+    LinkTarget["PARENT"] = "_parent";
+    LinkTarget["TOP"] = "_top";
 })(LinkTarget || (LinkTarget = {}));
 //# sourceMappingURL=linkTarget.enum.js.map

package/dist/src/tuix-link/enums/linkTarget.enum.js.map

@@ -1 +1 @@
-{"version":3,"file":"linkTarget.enum.js","sourceRoot":"","sources":["../../../../src/tuix-link/enums/linkTarget.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,8BAAgB,CAAA;IAChB,4BAAc,CAAA;IACd,gCAAkB,CAAA;IAClB,0BAAY,CAAA;AACd,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB","sourcesContent":["export enum LinkTarget {\n  Blank = '_blank',\n  Self = '_self',\n  Parent = '_parent',\n  Top = '_top',\n}\n"]}
+{"version":3,"file":"linkTarget.enum.js","sourceRoot":"","sources":["../../../../src/tuix-link/enums/linkTarget.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,UAKX;AALD,WAAY,UAAU;IACpB,8BAAgB,CAAA;IAChB,4BAAc,CAAA;IACd,gCAAkB,CAAA;IAClB,0BAAY,CAAA;AACd,CAAC,EALW,UAAU,KAAV,UAAU,QAKrB","sourcesContent":["export enum LinkTarget {\n  BLANK = '_blank',\n  SELF = '_self',\n  PARENT = '_parent',\n  TOP = '_top',\n}\n"]}

package/dist/src/tuix-paper/TuixPaper.d.ts

@@ -1,7 +1,9 @@
 import { LitElement, TemplateResult } from 'lit';
-import { ShadowVariants } from './enums/tuix-paper.enum';
+import { PaperVariant } from './enums/tuix-paper.enum';
 export declare class TuixPaper extends LitElement {
-    elevation: ShadowVariants;
+    elevation: PaperVariant;
+    dark: boolean;
     static styles: import("lit").CSSResult;
+    private _getOptionalClasses;
     render(): TemplateResult;
 }

package/dist/src/tuix-paper/TuixPaper.js

@@ -1,14 +1,26 @@
 import { __decorate } from "tslib";
 import { LitElement, css, html, unsafeCSS } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { ShadowVariants } from './enums/tuix-paper.enum';
+import { PaperVariant } from './enums/tuix-paper.enum';
+import { classMap } from 'lit/directives/class-map.js';
 let TuixPaper = class TuixPaper extends LitElement {
     constructor() {
         super(...arguments);
-        this.elevation = ShadowVariants.Variant_1;
+        this.elevation = PaperVariant.VARIANT_1;
+        this.dark = false;
+    }
+    _getOptionalClasses() {
+        const elevationClass = `elevation `;
+        const variantClass = `variant_${this.elevation}`;
+        const darkClass = `dark_${this.elevation}`;
+        return {
+            [elevationClass]: true,
+            [variantClass]: !this.dark,
+            [darkClass]: this.dark,
+        };
     }
     render() {
-        return html ` <div class="elevation variant_${this.elevation}">
+        return html ` <div class="${classMap(this._getOptionalClasses())}">
       <slot></slot>
     </div>`;
     }
@@ -17,22 +29,27 @@ let TuixPaper = class TuixPaper extends LitElement {
 TuixPaper.styles = css `
     .elevation {
       border-radius: 20px;
-      padding: 16px 32px;
     }
 
-    ${unsafeCSS(Object.values(ShadowVariants).slice(1)
+    ${unsafeCSS(Object.values(PaperVariant).slice(1)
     .map((variant, index) => {
     return `
             .elevation.variant_${variant} {
               box-shadow: 0px ${Math.pow(2, index)}px ${Math.pow(2, (index + 2))}px rgba(66, 79, 101, 0.16);
             }
+            .elevation.dark_${variant} {
+              background-color: ${unsafeCSS(`rgb(${23 + 3 * (index)}, ${23 + 3 * (index)}, ${26 + 5 * (index)})`)};
+            }
           `;
 })
     .join('\n'))}
   `;
 __decorate([
-    property({ type: ShadowVariants })
+    property({ type: PaperVariant })
 ], TuixPaper.prototype, "elevation", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixPaper.prototype, "dark", void 0);
 TuixPaper = __decorate([
     customElement('tuix-paper')
 ], TuixPaper);

package/dist/src/tuix-paper/TuixPaper.js.map

@@ -1 +1 @@
-{"version":3,"file":"TuixPaper.js","sourceRoot":"","sources":["../../../src/tuix-paper/TuixPaper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAEE,cAAS,GAAmB,cAAc,CAAC,SAAS,CAAC;IA2BvD,CAAC;IALC,MAAM;QACJ,OAAO,IAAI,CAAA,kCAAkC,IAAI,CAAC,SAAS;;WAEpD,CAAC;IACV,CAAC;;AAxBD,kBAAkB;AACX,gBAAM,GAAG,GAAG,CAAA;;;;;;MAMf,SAAS,CACT,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;KACnC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;IACtB,OAAO;iCACgB,OAAO;gCACR,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;;WAErE,CAAC;AACJ,CAAC,CAAC;KACD,IAAI,CAAC,IAAI,CAAC,CACd;GACF,AAjBY,CAiBX;AApBF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC;4CACkB;AAF1C,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA6BrB;SA7BY,SAAS","sourcesContent":["import { LitElement, TemplateResult, css, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ShadowVariants } from './enums/tuix-paper.enum';\n\n@customElement('tuix-paper')\nexport class TuixPaper extends LitElement {\n  @property({ type: ShadowVariants })\n  elevation: ShadowVariants = ShadowVariants.Variant_1;\n\n  // prettier-ignore\n  static styles = css`\n    .elevation {\n      border-radius: 20px;\n      padding: 16px 32px;\n    }\n\n    ${unsafeCSS(\n      Object.values(ShadowVariants).slice(1)\n        .map((variant, index) => {\n          return `\n            .elevation.variant_${variant} {\n              box-shadow: 0px ${Math.pow(2, index)}px ${Math.pow(2, (index + 2))}px rgba(66, 79, 101, 0.16);\n            }\n          `;\n        })\n        .join('\\n')\n    )}\n  `;\n\n  render(): TemplateResult {\n    return html` <div class=\"elevation variant_${this.elevation}\">\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}
+{"version":3,"file":"TuixPaper.js","sourceRoot":"","sources":["../../../src/tuix-paper/TuixPaper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkB,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGlE,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAAzC;;QAEE,cAAS,GAAG,YAAY,CAAC,SAAS,CAAC;QAGnC,SAAI,GAAG,KAAK,CAAC;IAwCf,CAAC;IAhBS,mBAAmB;QACzB,MAAM,cAAc,GAAG,YAAY,CAAC;QACpC,MAAM,YAAY,GAAG,WAAW,IAAI,CAAC,SAAS,EAAE,CAAC;QACjD,MAAM,SAAS,GAAG,QAAQ,IAAI,CAAC,SAAS,EAAE,CAAC;QAC3C,OAAO;YACL,CAAC,cAAc,CAAC,EAAE,IAAI;YACtB,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI;YAC1B,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI;SACvB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,gBAAgB,QAAQ,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC;;WAExD,CAAC;IACV,CAAC;;AArCD,kBAAkB;AACX,gBAAM,GAAG,GAAG,CAAA;;;;;MAKf,SAAS,CACT,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;KACjC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;IACtB,OAAO;iCACgB,OAAO;gCACR,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;;8BAElD,OAAO;kCACH,SAAS,CAAC,OAAO,EAAE,GAAG,CAAC,GAAC,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,GAAC,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,GAAC,CAAC,KAAK,CAAC,GAAG,CAAC;;WAEhG,CAAC;AACJ,CAAC,CAAC;KACD,IAAI,CAAC,IAAI,CAAC,CACd;GACF,AAnBY,CAmBX;AAzBF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC;4CACE;AAGnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAC9B;AALF,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA6CrB;SA7CY,SAAS","sourcesContent":["import { LitElement, TemplateResult, css, html, unsafeCSS } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { PaperVariant } from './enums/tuix-paper.enum';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\n\n@customElement('tuix-paper')\nexport class TuixPaper extends LitElement {\n  @property({ type: PaperVariant })\n  elevation = PaperVariant.VARIANT_1;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  // prettier-ignore\n  static styles = css`\n    .elevation {\n      border-radius: 20px;\n    }\n\n    ${unsafeCSS(\n      Object.values(PaperVariant).slice(1)\n        .map((variant, index) => {\n          return `\n            .elevation.variant_${variant} {\n              box-shadow: 0px ${Math.pow(2, index)}px ${Math.pow(2, (index + 2))}px rgba(66, 79, 101, 0.16);\n            }\n            .elevation.dark_${variant} {\n              background-color: ${unsafeCSS(`rgb(${23 + 3*(index)}, ${23 + 3*(index)}, ${26 + 5*(index)})`)};\n            }\n          `;\n        })\n        .join('\\n')\n    )}\n  `;\n\n  private _getOptionalClasses(): ClassInfo {\n    const elevationClass = `elevation `;\n    const variantClass = `variant_${this.elevation}`;\n    const darkClass = `dark_${this.elevation}`;\n    return {\n      [elevationClass]: true,\n      [variantClass]: !this.dark,\n      [darkClass]: this.dark,\n    };\n  }\n\n  render(): TemplateResult {\n    return html` <div class=\"${classMap(this._getOptionalClasses())}\">\n      <slot></slot>\n    </div>`;\n  }\n}\n"]}

package/dist/src/tuix-paper/enums/tuix-paper.enum.d.ts

@@ -1,7 +1,7 @@
-export declare enum ShadowVariants {
-    Variant_0 = "0",
-    Variant_1 = "1",
-    Variant_2 = "2",
-    Variant_3 = "3",
-    Variant_4 = "4"
+export declare enum PaperVariant {
+    VARIANT_0 = "0",
+    VARIANT_1 = "1",
+    VARIANT_2 = "2",
+    VARIANT_3 = "3",
+    VARIANT_4 = "4"
 }

package/dist/src/tuix-paper/enums/tuix-paper.enum.js

@@ -1,9 +1,9 @@
-export var ShadowVariants;
-(function (ShadowVariants) {
-    ShadowVariants["Variant_0"] = "0";
-    ShadowVariants["Variant_1"] = "1";
-    ShadowVariants["Variant_2"] = "2";
-    ShadowVariants["Variant_3"] = "3";
-    ShadowVariants["Variant_4"] = "4";
-})(ShadowVariants || (ShadowVariants = {}));
+export var PaperVariant;
+(function (PaperVariant) {
+    PaperVariant["VARIANT_0"] = "0";
+    PaperVariant["VARIANT_1"] = "1";
+    PaperVariant["VARIANT_2"] = "2";
+    PaperVariant["VARIANT_3"] = "3";
+    PaperVariant["VARIANT_4"] = "4";
+})(PaperVariant || (PaperVariant = {}));
 //# sourceMappingURL=tuix-paper.enum.js.map

package/dist/src/tuix-paper/enums/tuix-paper.enum.js.map

@@ -1 +1 @@
-{"version":3,"file":"tuix-paper.enum.js","sourceRoot":"","sources":["../../../../src/tuix-paper/enums/tuix-paper.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,cAMX;AAND,WAAY,cAAc;IACxB,iCAAe,CAAA;IACf,iCAAe,CAAA;IACf,iCAAe,CAAA;IACf,iCAAe,CAAA;IACf,iCAAe,CAAA;AACjB,CAAC,EANW,cAAc,KAAd,cAAc,QAMzB","sourcesContent":["export enum ShadowVariants {\n  Variant_0 = '0',\n  Variant_1 = '1',\n  Variant_2 = '2',\n  Variant_3 = '3',\n  Variant_4 = '4',\n}\n"]}
+{"version":3,"file":"tuix-paper.enum.js","sourceRoot":"","sources":["../../../../src/tuix-paper/enums/tuix-paper.enum.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,YAMX;AAND,WAAY,YAAY;IACtB,+BAAe,CAAA;IACf,+BAAe,CAAA;IACf,+BAAe,CAAA;IACf,+BAAe,CAAA;IACf,+BAAe,CAAA;AACjB,CAAC,EANW,YAAY,KAAZ,YAAY,QAMvB","sourcesContent":["export enum PaperVariant {\n  VARIANT_0 = '0',\n  VARIANT_1 = '1',\n  VARIANT_2 = '2',\n  VARIANT_3 = '3',\n  VARIANT_4 = '4',\n}\n"]}

package/dist/src/tuix-radio-button/TuixRadioButton.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
+import { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface';
+export declare class TuixRadioButton extends LitElement {
+    static styles: import("lit").CSSResult[];
+    disabled: boolean;
+    dark: boolean;
+    error: boolean;
+    options: TuixRadioButtonOption[];
+    labelSide: CheckboxLabelSide;
+    selectedOption: TuixRadioButtonOption | null;
+    private _onRadioButtonChange;
+    private _getFullContainerClasses;
+    private _formatTemplate;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/tuix-radio-button/TuixRadioButton.js

@@ -0,0 +1,87 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';
+import { radioButtonContainerStyles, radioButtonInnerStyles, radioButtonLabelStyles, radioButtonStyles, radioHostStyles, } from './TuixRadioButton.styles';
+let TuixRadioButton = class TuixRadioButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.dark = false;
+        this.error = false;
+        this.options = [];
+        this.labelSide = CheckboxLabelSide.RIGHT;
+        this.selectedOption = null;
+    }
+    _onRadioButtonChange(event) {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: {
+                value: event.target.value,
+            },
+            bubbles: true,
+        }));
+    }
+    _getFullContainerClasses() {
+        return {
+            't-radio-button-full-container': true,
+            't-with-error': this.error && !this.disabled,
+            't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,
+            't-multiple-options': this.options.length > 1,
+        };
+    }
+    _formatTemplate(option, index) {
+        return html `<label class="${classMap(this._getFullContainerClasses())}">
+      <div class="t-radio-button-container">
+        <input
+          type="radio"
+          class="t-radio-button"
+          ?disabled="${this.disabled}"
+          .value="${option}"
+          name="tuix-radio-button"
+          ?checked="${this.selectedOption === option}"
+          @change="${this._onRadioButtonChange}"
+        />
+        <div class="t-radio-button-checkmark">
+          <div class="t-radio-button-inner"></div>
+        </div>
+      </div>
+      <div class="t-radio-button-label">
+        <slot name="label-${index}">${option}</slot>
+      </div>
+    </label>`;
+    }
+    render() {
+        return html `${this.options.map((option, index) => this._formatTemplate(option, index))}`;
+    }
+};
+TuixRadioButton.styles = [
+    radioHostStyles,
+    radioButtonContainerStyles,
+    radioButtonStyles,
+    radioButtonInnerStyles,
+    radioButtonLabelStyles,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixRadioButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixRadioButton.prototype, "dark", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixRadioButton.prototype, "error", void 0);
+__decorate([
+    property({ type: Array })
+], TuixRadioButton.prototype, "options", void 0);
+__decorate([
+    property({ type: String })
+], TuixRadioButton.prototype, "labelSide", void 0);
+__decorate([
+    property({ type: String })
+], TuixRadioButton.prototype, "selectedOption", void 0);
+TuixRadioButton = __decorate([
+    customElement('tuix-radio-button')
+], TuixRadioButton);
+export { TuixRadioButton };
+//# sourceMappingURL=TuixRadioButton.js.map

package/dist/src/tuix-radio-button/TuixRadioButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TuixRadioButton.js","sourceRoot":"","sources":["../../../src/tuix-radio-button/TuixRadioButton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAa,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAC/E,OAAO,EACL,0BAA0B,EAC1B,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,EACjB,eAAe,GAChB,MAAM,0BAA0B,CAAC;AAIlC,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,UAAU;IAA/C;;QAUE,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGb,UAAK,GAAG,KAAK,CAAC;QAGd,YAAO,GAA4B,EAAE,CAAC;QAGtC,cAAS,GAAG,iBAAiB,CAAC,KAAK,CAAC;QAGpC,mBAAc,GAAiC,IAAI,CAAC;IAiDtD,CAAC;IA/CS,oBAAoB,CAAC,KAAiB;QAC5C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE;gBACN,KAAK,EAAG,KAAK,CAAC,MAA2B,CAAC,KAAK;aAChD;YACD,OAAO,EAAE,IAAI;SACd,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,wBAAwB;QAC9B,OAAO;YACL,+BAA+B,EAAE,IAAI;YACrC,cAAc,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ;YAC5C,mBAAmB,EAAE,IAAI,CAAC,SAAS,KAAK,iBAAiB,CAAC,IAAI;YAC9D,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC;SAC9C,CAAC;IACJ,CAAC;IAEO,eAAe,CAAC,MAA6B,EAAE,KAAa;QAClE,OAAO,IAAI,CAAA,iBAAiB,QAAQ,CAAC,IAAI,CAAC,wBAAwB,EAAE,CAAC;;;;;uBAKlD,IAAI,CAAC,QAAQ;oBAChB,MAAM;;sBAEJ,IAAI,CAAC,cAAc,KAAK,MAAM;qBAC/B,IAAI,CAAC,oBAAoB;;;;;;;4BAOlB,KAAK,KAAK,MAAM;;aAE/B,CAAC;IACZ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAC/C,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,KAAK,CAAC,CACpC,EAAE,CAAC;IACN,CAAC;;AAxEM,sBAAM,GAAG;IACd,eAAe;IACf,0BAA0B;IAC1B,iBAAiB;IACjB,sBAAsB;IACtB,sBAAsB;CACvB,AANY,CAMX;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAC9B;AAGb;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAC7B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDACY;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDACS;AAGpC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACyB;AAzBzC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA0E3B;SA1EY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js';\nimport { CheckboxLabelSide } from '../tuix-checkbox/enums/tuix-checkbox.enums';\nimport {\n  radioButtonContainerStyles,\n  radioButtonInnerStyles,\n  radioButtonLabelStyles,\n  radioButtonStyles,\n  radioHostStyles,\n} from './TuixRadioButton.styles';\nimport { TuixRadioButtonOption } from './interfaces/tuix-radio-button.interface';\n\n@customElement('tuix-radio-button')\nexport class TuixRadioButton extends LitElement {\n  static styles = [\n    radioHostStyles,\n    radioButtonContainerStyles,\n    radioButtonStyles,\n    radioButtonInnerStyles,\n    radioButtonLabelStyles,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  dark = false;\n\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  @property({ type: Array })\n  options: TuixRadioButtonOption[] = [];\n\n  @property({ type: String })\n  labelSide = CheckboxLabelSide.RIGHT;\n\n  @property({ type: String })\n  selectedOption: TuixRadioButtonOption | null = null;\n\n  private _onRadioButtonChange(event: InputEvent) {\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          value: (event.target as HTMLInputElement).value,\n        },\n        bubbles: true,\n      })\n    );\n  }\n\n  private _getFullContainerClasses(): ClassInfo {\n    return {\n      't-radio-button-full-container': true,\n      't-with-error': this.error && !this.disabled,\n      't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,\n      't-multiple-options': this.options.length > 1,\n    };\n  }\n\n  private _formatTemplate(option: TuixRadioButtonOption, index: number) {\n    return html`<label class=\"${classMap(this._getFullContainerClasses())}\">\n      <div class=\"t-radio-button-container\">\n        <input\n          type=\"radio\"\n          class=\"t-radio-button\"\n          ?disabled=\"${this.disabled}\"\n          .value=\"${option}\"\n          name=\"tuix-radio-button\"\n          ?checked=\"${this.selectedOption === option}\"\n          @change=\"${this._onRadioButtonChange}\"\n        />\n        <div class=\"t-radio-button-checkmark\">\n          <div class=\"t-radio-button-inner\"></div>\n        </div>\n      </div>\n      <div class=\"t-radio-button-label\">\n        <slot name=\"label-${index}\">${option}</slot>\n      </div>\n    </label>`;\n  }\n\n  render() {\n    return html`${this.options.map((option, index) =>\n      this._formatTemplate(option, index)\n    )}`;\n  }\n}\n"]}

package/dist/src/tuix-radio-button/TuixRadioButton.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const radioHostStyles: import("lit").CSSResult;
+export declare const radioButtonContainerStyles: import("lit").CSSResult;
+export declare const radioButtonStyles: import("lit").CSSResult;
+export declare const radioButtonInnerStyles: import("lit").CSSResult;
+export declare const radioButtonLabelStyles: import("lit").CSSResult;