tuix-webcomponents 0.0.21 → 0.0.24

package/README.md

@@ -10,14 +10,110 @@ npm i tuix-webcomponents
 
 ## Usage
 
+### Webbundle version
+
+Webbundle Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-bf814e0@0.89.0.js  
+Styles Link: https://tuix-webcomponents.s3.eu-central-1.amazonaws.com/build-bf814e0@0.89.0.css
+
+### React
+
+The package ships generated [@lit/react](https://lit.dev/docs/frameworks/react/)
+wrappers, one per element, so nothing has to be wrapped by hand. `@lit/react` is
+a peer dependency:
+
+```bash
+npm i tuix-webcomponents @lit/react
+```
+
+```tsx
+import 'tuix-webcomponents/dist/assets/tuix-styles.css';
+import { TuixButton, TuixText } from 'tuix-webcomponents/react';
+import { IconName, MainVariant, TextSize } from 'tuix-webcomponents';
+
+function App() {
+  return (
+    <>
+      <TuixText size={TextSize.XL}>Test text</TuixText>
+      <TuixButton
+        variant={MainVariant.PRIMARY}
+        iconLeft={IconName.SAVE}
+        onCustomClick={() => console.log('clicked')}
+      >
+        Save
+      </TuixButton>
+    </>
+  );
+}
+```
+
+The props are the element's own properties, so objects and arrays pass through
+untouched, and each custom event arrives as an `on*` prop. Because those
+properties are typed with the exported enums, pass `MainVariant.PRIMARY` rather
+than the string `'primary'`.
+
+The wrappers are generated by `scripts/build-react.ts` during `npm run build`
+and land in `dist/src/react`; `src/react/` is gitignored. Nothing about them is
+hand-kept: the generator reads `src/`, so every element with a `@customElement`
+decorator gets a wrapper, and every event it dispatches gets its `on*` prop,
+typed with the detail type written at the dispatch site.
+
+### Fonts
+
+The components render in Rubik, served from the Tuix CDN. The design tokens
+stylesheet imports it, so `import 'tuix-webcomponents/dist/assets/tuix-styles.css'`
+is enough. To start the request earlier, add the link to the document head:
+
 ```html
-<script type="module">
-  import 'tuix-webcomponents/tuix-webcomponents.js';
-</script>
+<link rel="preconnect" href="https://hccdn.tuix.ch" />
+<link rel="stylesheet" href="https://hccdn.tuix.ch/rubik_d444e2375d.css" />
+```
+
+There is no `loadFonts()` helper any more: injecting the stylesheet from
+JavaScript reflowed the page once the face arrived.
+
+## Documentation
 
-<tuix-webcomponents></tuix-webcomponents>
+The developer documentation site (Fumadocs, statically exported) lives in
+`docs/` as its own npm project:
+
+```bash
+cd docs
+npm install
+npm run dev     # http://localhost:3000/en/developers
+npm run build   # static export into docs/dist
+```
+
+It carries step-by-step integration guides for React/Next.js, Vue and Angular,
+and a page per component with live previews of every variant, in English and
+German. Pages are MDX files in `docs/content/docs/` (`*.mdx` English,
+`*.de.mdx` German), ordered by `meta.json` and `meta.de.json`.
+
+See `docs/src/modules/docs/README.md` for how the site is put together, and
+[the contributing page](docs/content/docs/contributing.mdx) for the workflow.
+
+## Building the package
+
+```bash
+npm run build
 ```
 
+writes `dist/`, which is exactly what `npm publish` ships (`files: ["dist"]`):
+
+| Path                             | Entry point                                  |
+| -------------------------------- | -------------------------------------------- |
+| `dist/src/index.js` + `.d.ts`    | `tuix-webcomponents` — the custom elements   |
+| `dist/src/react/index.js`        | `tuix-webcomponents/react` — the wrappers    |
+| `dist/assets/tuix-styles.css`    | `tuix-webcomponents/dist/assets/tuix-styles.css` — the design tokens |
+
+The steps behind it: `cem analyze` refreshes `custom-elements.json`,
+`scripts/build-react.ts` regenerates `src/react/`, `tsc -p tsconfig.publish.json`
+compiles both entry points with their declarations, `build:css` renders the
+tokens, and `tsc-esm-fix` adds the `.js` extensions Node's ESM resolver needs.
+
+`npm publish` re-runs it through `prepublishOnly`, so a release cannot ship a
+stale `dist/`. `npm run publish:local` packs the same output into a linkable
+`local/` folder for trying it in another project.
+
 ## Linting and formatting
 
 To scan the project for linting and formatting errors, run
@@ -46,6 +142,15 @@ To build a production version of Storybook, run
 npm run storybook:build
 ```
 
+That writes `dist/storybook`, which is where the deployed site serves it from.
+The site root is the documentation, and the Storybook sidebar brand links back
+to it. `scripts/build.sh` is what assembles both into `dist/` for CI.
+
+Note that `dist/` carries two different products, one per CI job: the site
+(`scripts/build.sh`, deployed to S3) and the npm package (`npm run build`, what
+`files` publishes). Both start by clearing it, so locally the last one to run
+wins.
+
 
 ## Tooling configs
 
@@ -60,3 +165,4 @@ npm start
 ```
 
 To run a local development server that serves the basic demo located in `demo/index.html`
+

package/dist/assets/tuix-styles.css

@@ -0,0 +1,72 @@
+@import url('https://hccdn.tuix.ch/rubik_d444e2375d.css');
+
+:root {
+  --tuix-light-color-primary-50: #F2F3FA;
+  --tuix-light-color-primary-100: #E3E5F4;
+  --tuix-light-color-primary-200: #C7CAE8;
+  --tuix-light-color-primary-300: #AAAFE0;
+  --tuix-light-color-primary-400: #8B90D2;
+  --tuix-light-color-main: #585A9D;
+  --tuix-light-color-dark-main: #6F73B8;
+  --tuix-light-color-primary-600: #4E508E;
+  --tuix-light-color-primary-700: #404277;
+  --tuix-light-color-primary-800: #32345F;
+  --tuix-light-color-primary-900: #22233F;
+  --tuix-light-color-primary-950: #1F1E33;
+  --tuix-light-color-secondary: #BBADFF;
+  --tuix-light-color-white: #FFFFFF;
+  --tuix-light-color-black: #121212;
+  --tuix-light-color-neutral-200: #FAFAFA;
+  --tuix-light-color-neutral-600: #b6b6b6;
+  --tuix-light-color-success: #439F6E;
+  --tuix-light-color-success-50: #F1F9F5;
+  --tuix-light-color-validation: #FFB82E;
+  --tuix-light-color-validation-50: #FFFBF4;
+  --tuix-light-color-validation-200: #FFEAC1;
+  --tuix-light-color-error: #F93232;
+  --tuix-light-color-error-50: #FFF5F5;
+  --tuix-light-color-error-200: #FFD8D8;
+  --tuix-light-color-section-bg: #FAFAFA;
+  --tuix-light-color-disabled-bg: #EBEAF4;
+  --tuix-light-color-shadow: rgba(66, 79, 101, 0.16);
+  --tuix-dark-color-primary-50: #F4F5FB;
+  --tuix-dark-color-primary-100: #E3E5F4;
+  --tuix-dark-color-#e3e5f4: PRIMARY_100;
+  --tuix-dark-color-primary-200: #C7CAE8;
+  --tuix-dark-color-#c7cae8: PRIMARY_200;
+  --tuix-dark-color-primary-300: #AAAFE0;
+  --tuix-dark-color-#aaafe0: PRIMARY_300;
+  --tuix-dark-color-primary-400: #8B90D2;
+  --tuix-dark-color-#8b90d2: PRIMARY_400;
+  --tuix-dark-color-main: #6F73B8;
+  --tuix-dark-color-dark-main: #6F73B8;
+  --tuix-dark-color-#6f73b8: DARK_MAIN;
+  --tuix-dark-color-primary-600: #5C60A4;
+  --tuix-dark-color-primary-700: #4A4E8E;
+  --tuix-dark-color-primary-800: #32355F;
+  --tuix-dark-color-primary-900: #181A32;
+  --tuix-dark-color-primary-950: #1F1E33;
+  --tuix-dark-color-#1f1e33: PRIMARY_950;
+  --tuix-dark-color-secondary: #BBADFF;
+  --tuix-dark-color-#bbadff: SECONDARY;
+  --tuix-dark-color-white: #FFFFFF;
+  --tuix-dark-color-black: #0F1117;
+  --tuix-dark-color-neutral-200: #C9C8D3;
+  --tuix-dark-color-neutral-600: #8A8894;
+  --tuix-dark-color-success: #439F6E;
+  --tuix-dark-color-#439f6e: SUCCESS;
+  --tuix-dark-color-success-50: rgba(241, 249, 245, 0.30);
+  --tuix-dark-color-validation: #FFD489;
+  --tuix-dark-color-validation-50: rgba(255, 212, 137, 0.20);
+  --tuix-dark-color-validation-200: #FFEAC1;
+  --tuix-dark-color-#ffeac1: VALIDATION_200;
+  --tuix-dark-color-error: #FF8486;
+  --tuix-dark-color-error-50: rgba(255, 132, 134, 0.20);
+  --tuix-dark-color-error-200: #FFD8D8;
+  --tuix-dark-color-#ffd8d8: ERROR_200;
+  --tuix-dark-color-section-bg: #0E0E0E;
+  --tuix-dark-color-elevation-1: #141722;
+  --tuix-dark-color-elevation-2: #181C29;
+  --tuix-dark-color-elevation-3: #1D2131;
+  --tuix-dark-color-elevation-4: #23273A;
+}

package/dist/src/index.d.ts

@@ -1,2 +1,35 @@
+export { type CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';
+export type { CustomEventTuixCheckbox, DetailValueCheckbox, } from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';
+export type { CustomEventTuixDropdownInput, CustomEventTuixDropdownSelect, TuixDropdownOption, TuixDropdownObjectOption, TuixDropdownPlainOption, } from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';
+export type { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';
+export type { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';
+export type { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';
+export type { DetailValue } from './utils/interfaces/detail-value.interface.js';
 export { TuixText } from './tuix-text/TuixText.js';
-export declare function loadFonts(): void;
+export { TuixIcon } from './tuix-icon/TuixIcon.js';
+export { TuixButton } from './tuix-button/TuixButton.js';
+export { TuixPaper } from './tuix-paper/TuixPaper.js';
+export { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';
+export { TuixLink } from './tuix-link/TuixLink.js';
+export { TuixInput } from './tuix-input/TuixInput.js';
+export { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';
+export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
+export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
+export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
+export { TuixTable } from './tuix-table/TuixTable.js';
+export type { IDataTableHeader, PaginationEventDetail, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
+export { TuixToast } from './tuix-toast/TuixToast.js';
+export { TuixModal } from './tuix-modal/TuixModal.js';
+export { ToastType } from './tuix-toast/enums/tuix-toast.enums.js';
+export { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';
+export { MainVariant } from './utils/mainVariant.enum.js';
+export { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';
+export { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';
+export { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';
+export { IconName, IconSizeVariant, } from './tuix-icon/enums/tuix-icon.enums.js';
+export { DescriptionType, InputType, } from './tuix-input/enums/tuix-input.enums.js';
+export { Palette } from './utils/colors.js';
+export { DarkPalette } from './utils/darkColors.js';
+export { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';
+export { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';
+export { ScreenSizes } from './utils/screenSizes.enum.js';

package/dist/src/index.js

@@ -1,17 +1,27 @@
 export { TuixText } from './tuix-text/TuixText.js';
-export function loadFonts() {
-    const link1 = document.createElement('link');
-    link1.rel = 'preconnect';
-    link1.href = 'https://fonts.googleapis.com';
-    const link2 = document.createElement('link');
-    link2.rel = 'preconnect';
-    link2.href = 'https://fonts.gstatic.com';
-    const link3 = document.createElement('link');
-    link3.rel = 'stylesheet';
-    link3.href =
-        'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';
-    document.head.appendChild(link1);
-    document.head.appendChild(link2);
-    document.head.appendChild(link3);
-}
-//# sourceMappingURL=index.js.map
+export { TuixIcon } from './tuix-icon/TuixIcon.js';
+export { TuixButton } from './tuix-button/TuixButton.js';
+export { TuixPaper } from './tuix-paper/TuixPaper.js';
+export { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';
+export { TuixLink } from './tuix-link/TuixLink.js';
+export { TuixInput } from './tuix-input/TuixInput.js';
+export { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';
+export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
+export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
+export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
+export { TuixTable } from './tuix-table/TuixTable.js';
+export { TuixToast } from './tuix-toast/TuixToast.js';
+export { TuixModal } from './tuix-modal/TuixModal.js';
+export { ToastType } from './tuix-toast/enums/tuix-toast.enums.js';
+export { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';
+export { MainVariant } from './utils/mainVariant.enum.js';
+export { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';
+export { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';
+export { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';
+export { IconName, IconSizeVariant, } from './tuix-icon/enums/tuix-icon.enums.js';
+export { DescriptionType, InputType, } from './tuix-input/enums/tuix-input.enums.js';
+export { Palette } from './utils/colors.js';
+export { DarkPalette } from './utils/darkColors.js';
+export { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';
+export { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';
+export { ScreenSizes } from './utils/screenSizes.enum.js';

package/dist/src/react/index.d.ts

@@ -0,0 +1,42 @@
+import { type EventName } from '@lit/react';
+import { TuixText as TuixTextElement, TuixIcon as TuixIconElement, TuixButton as TuixButtonElement, TuixPaper as TuixPaperElement, TuixIconButton as TuixIconButtonElement, TuixLink as TuixLinkElement, TuixInput as TuixInputElement, TuixDropdown as TuixDropdownElement, TuixCheckbox as TuixCheckboxElement, TuixRadioButton as TuixRadioButtonElement, TuixToggleButton as TuixToggleButtonElement, TuixTable as TuixTableElement, TuixToast as TuixToastElement, TuixModal as TuixModalElement } from '../index.js';
+import type { DetailValue, DetailValueCheckbox, PaginationEventDetail, TuixDropdownPlainOption } from '../index.js';
+export declare const TuixText: import("@lit/react").ReactWebComponent<TuixTextElement, {}>;
+export declare const TuixIcon: import("@lit/react").ReactWebComponent<TuixIconElement, {}>;
+export declare const TuixButton: import("@lit/react").ReactWebComponent<TuixButtonElement, {
+    onCustomClick: EventName<CustomEvent<undefined>>;
+}>;
+export declare const TuixPaper: import("@lit/react").ReactWebComponent<TuixPaperElement, {}>;
+export declare const TuixIconButton: import("@lit/react").ReactWebComponent<TuixIconButtonElement, {
+    onCustomClick: EventName<CustomEvent<undefined>>;
+}>;
+export declare const TuixLink: import("@lit/react").ReactWebComponent<TuixLinkElement, {}>;
+export declare const TuixInput: import("@lit/react").ReactWebComponent<TuixInputElement, {
+    onChange: EventName<CustomEvent<DetailValue<string>>>;
+    onBlur: EventName<CustomEvent<DetailValue<string>>>;
+    onClick: EventName<CustomEvent<undefined>>;
+}>;
+export declare const TuixDropdown: import("@lit/react").ReactWebComponent<TuixDropdownElement, {
+    onSelect: EventName<CustomEvent<DetailValue<TuixDropdownPlainOption>>>;
+    onInputSingle: EventName<CustomEvent<DetailValue<string>>>;
+}>;
+export declare const TuixCheckbox: import("@lit/react").ReactWebComponent<TuixCheckboxElement, {
+    onChange: EventName<CustomEvent<DetailValueCheckbox>>;
+}>;
+export declare const TuixRadioButton: import("@lit/react").ReactWebComponent<TuixRadioButtonElement, {
+    onChange: EventName<CustomEvent<DetailValue<string>>>;
+}>;
+export declare const TuixToggleButton: import("@lit/react").ReactWebComponent<TuixToggleButtonElement, {
+    onChange: EventName<CustomEvent<DetailValueCheckbox>>;
+}>;
+export declare const TuixTable: import("@lit/react").ReactWebComponent<TuixTableElement, {
+    onNextPage: EventName<CustomEvent<PaginationEventDetail>>;
+    onPreviousPage: EventName<CustomEvent<PaginationEventDetail>>;
+    onPageSizeChange: EventName<CustomEvent<PaginationEventDetail>>;
+}>;
+export declare const TuixToast: import("@lit/react").ReactWebComponent<TuixToastElement, {
+    onClose: EventName<CustomEvent<undefined>>;
+}>;
+export declare const TuixModal: import("@lit/react").ReactWebComponent<TuixModalElement, {
+    onClose: EventName<CustomEvent<undefined>>;
+}>;

package/dist/src/react/index.js

@@ -0,0 +1,114 @@
+// Generated by scripts/build-react.ts. Do not edit by hand.
+//
+// React wrappers for every element, built with @lit/react: the props are the
+// element's own properties, so objects and arrays pass through untouched, and
+// each custom event arrives as an `on*` prop instead of an addEventListener
+// call. Importing from here registers the custom elements.
+import { createComponent } from '@lit/react';
+import * as React from 'react';
+import { TuixText as TuixTextElement, TuixIcon as TuixIconElement, TuixButton as TuixButtonElement, TuixPaper as TuixPaperElement, TuixIconButton as TuixIconButtonElement, TuixLink as TuixLinkElement, TuixInput as TuixInputElement, TuixDropdown as TuixDropdownElement, TuixCheckbox as TuixCheckboxElement, TuixRadioButton as TuixRadioButtonElement, TuixToggleButton as TuixToggleButtonElement, TuixTable as TuixTableElement, TuixToast as TuixToastElement, TuixModal as TuixModalElement, } from '../index.js';
+export const TuixText = createComponent({
+    tagName: 'tuix-text',
+    elementClass: TuixTextElement,
+    react: React,
+});
+export const TuixIcon = createComponent({
+    tagName: 'tuix-icon',
+    elementClass: TuixIconElement,
+    react: React,
+});
+export const TuixButton = createComponent({
+    tagName: 'tuix-button',
+    elementClass: TuixButtonElement,
+    react: React,
+    events: {
+        onCustomClick: 'customClick',
+    },
+});
+export const TuixPaper = createComponent({
+    tagName: 'tuix-paper',
+    elementClass: TuixPaperElement,
+    react: React,
+});
+export const TuixIconButton = createComponent({
+    tagName: 'tuix-icon-button',
+    elementClass: TuixIconButtonElement,
+    react: React,
+    events: {
+        onCustomClick: 'customClick',
+    },
+});
+export const TuixLink = createComponent({
+    tagName: 'tuix-link',
+    elementClass: TuixLinkElement,
+    react: React,
+});
+export const TuixInput = createComponent({
+    tagName: 'tuix-input',
+    elementClass: TuixInputElement,
+    react: React,
+    events: {
+        onChange: 'on-change',
+        onBlur: 'on-blur',
+        onClick: 'on-click',
+    },
+});
+export const TuixDropdown = createComponent({
+    tagName: 'tuix-dropdown',
+    elementClass: TuixDropdownElement,
+    react: React,
+    events: {
+        onSelect: 'select',
+        onInputSingle: 'input-single',
+    },
+});
+export const TuixCheckbox = createComponent({
+    tagName: 'tuix-checkbox',
+    elementClass: TuixCheckboxElement,
+    react: React,
+    events: {
+        onChange: 'change',
+    },
+});
+export const TuixRadioButton = createComponent({
+    tagName: 'tuix-radio-button',
+    elementClass: TuixRadioButtonElement,
+    react: React,
+    events: {
+        onChange: 'change',
+    },
+});
+export const TuixToggleButton = createComponent({
+    tagName: 'tuix-toggle-button',
+    elementClass: TuixToggleButtonElement,
+    react: React,
+    events: {
+        onChange: 'change',
+    },
+});
+export const TuixTable = createComponent({
+    tagName: 'tuix-table',
+    elementClass: TuixTableElement,
+    react: React,
+    events: {
+        onNextPage: 'next-page',
+        onPreviousPage: 'previous-page',
+        onPageSizeChange: 'page-size-change',
+    },
+});
+export const TuixToast = createComponent({
+    tagName: 'tuix-toast',
+    elementClass: TuixToastElement,
+    react: React,
+    events: {
+        onClose: 'on-close',
+    },
+});
+export const TuixModal = createComponent({
+    tagName: 'tuix-modal',
+    elementClass: TuixModalElement,
+    react: React,
+    events: {
+        onClose: 'on-close',
+    },
+});

package/dist/src/tuix-button/TuixBaseButton.d.ts

@@ -0,0 +1,17 @@
+import { LitElement, type TemplateResult } from 'lit';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
+import '../tuix-icon/TuixIcon.js';
+export declare abstract class TuixBaseButton extends LitElement {
+    variant: MainVariant;
+    disabled: boolean;
+    dark: boolean;
+    protected iconColor: string;
+    updated(): void;
+    protected _getTextColor(): string;
+    protected abstract _updateIconColor(): void;
+    protected _handleClick(): void;
+    protected _iconTemplate(iconName: IconName, iconSize: IconSizeVariant): TemplateResult;
+    protected abstract _buttonContent(): TemplateResult;
+    protected render(): TemplateResult;
+}

package/dist/src/tuix-button/TuixBaseButton.js

@@ -0,0 +1,60 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { MainVariant } from '../utils/mainVariant.enum.js';
+import { property, state } from 'lit/decorators.js';
+import { buttonTextColor } from './enums/tuix-button.enums.js';
+import '../tuix-icon/TuixIcon.js';
+export class TuixBaseButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = MainVariant.PRIMARY;
+        this.disabled = false;
+        this.dark = false;
+        this.iconColor = '';
+    }
+    updated() {
+        this._updateIconColor();
+    }
+    _getTextColor() {
+        const element = this.shadowRoot?.querySelector('.button');
+        if (!element)
+            return buttonTextColor[this.variant];
+        const computedStyle = getComputedStyle(element);
+        return computedStyle.color;
+    }
+    _handleClick() {
+        this.dispatchEvent(new CustomEvent('customClick', { bubbles: true }));
+    }
+    _iconTemplate(iconName, iconSize) {
+        this._updateIconColor();
+        return html `<tuix-icon
+      size="${iconSize}"
+      name="${iconName}"
+      color="${this.iconColor}"
+    ></tuix-icon>`;
+    }
+    render() {
+        return html `<button
+      @click=${this._handleClick}
+      @mouseenter=${this._updateIconColor}
+      @mouseleave=${this._updateIconColor}
+      @blur=${this._updateIconColor}
+      ?disabled="${this.disabled}"
+      class="button"
+    >
+      ${this._buttonContent()}
+    </button>`;
+    }
+}
+__decorate([
+    property({ type: MainVariant, reflect: true })
+], TuixBaseButton.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixBaseButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixBaseButton.prototype, "dark", void 0);
+__decorate([
+    state()
+], TuixBaseButton.prototype, "iconColor", void 0);

package/dist/src/tuix-button/TuixButton.d.ts

@@ -0,0 +1,11 @@
+import { type TemplateResult } from 'lit';
+import { IconName } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { TuixBaseButton } from './TuixBaseButton.js';
+export declare class TuixButton extends TuixBaseButton {
+    static styles: import("lit").CSSResult[];
+    full: boolean;
+    iconRight?: IconName;
+    iconLeft?: IconName;
+    protected _updateIconColor(): void;
+    protected _buttonContent(): TemplateResult;
+}

package/dist/src/tuix-button/TuixButton.js

@@ -0,0 +1,84 @@
+import { __decorate } from "tslib";
+import { css, html, nothing } from 'lit';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums.js';
+import { buttonSizeStyles, buttonColorStyles, hostButtonStyles, } from './TuixButton.styles.js';
+import { customElement, property } from 'lit/decorators.js';
+import { ScreenSizes } from '../utils/screenSizes.enum.js';
+import { TuixBaseButton } from './TuixBaseButton.js';
+let TuixButton = class TuixButton extends TuixBaseButton {
+    constructor() {
+        super(...arguments);
+        this.full = false;
+    }
+    static { this.styles = [
+        css `
+      :host([full]) .button {
+        width: 100%;
+      }
+      .button {
+        padding: 16px 32px;
+        border-radius: 4px;
+        border: none;
+        font-family: 'Rubik', sans-serif;
+      }
+
+      @media only screen and (max-width: ${ScreenSizes.TABLET}px) {
+        .button {
+          padding: 14px 32px;
+        }
+      }
+
+      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+        .button {
+          padding: 12px 24px;
+        }
+      }
+
+      .container {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+      }
+
+      @media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
+        .container {
+          gap: 6px;
+        }
+      }
+    `,
+        hostButtonStyles,
+        buttonColorStyles,
+        buttonSizeStyles,
+    ]; }
+    _updateIconColor() {
+        if (!this.iconLeft && !this.iconRight)
+            return;
+        this.iconColor = this._getTextColor();
+    }
+    _buttonContent() {
+        let iconSize = IconSizeVariant.MEDIUM;
+        if (screen.width <= ScreenSizes.TABLET) {
+            iconSize = IconSizeVariant.SMALL;
+        }
+        return html ` <div class="container">
+      ${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}
+      <slot></slot>
+      ${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}
+    </div>`;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], TuixButton.prototype, "full", void 0);
+__decorate([
+    property({ type: IconName })
+], TuixButton.prototype, "iconRight", void 0);
+__decorate([
+    property({ type: IconName })
+], TuixButton.prototype, "iconLeft", void 0);
+TuixButton = __decorate([
+    customElement('tuix-button')
+], TuixButton);
+export { TuixButton };

package/dist/src/tuix-button/TuixButton.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const hostButtonStyles: import("lit").CSSResult;
+export declare const buttonSizeStyles: import("lit").CSSResult;
+export declare const buttonColorStyles: import("lit").CSSResult;