tuix-webcomponents 0.0.22 → 0.0.25

package/README.md

@@ -10,38 +10,116 @@ npm i tuix-webcomponents
 
 ## Usage
 
-### React .tsx with SSR
+### Webbundle version
 
-```typescript jsx
-import { loadFonts } from 'tuix-webcomponents';
+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() {
-  
-  // load fonts for SSR and CSR
-  useEffect(() => {
-    loadFonts()
-  }, [])
-  
   return (
-    <tuix-text size="xl" type="headline" color="primary"></tuix-text>
-  )
+    <>
+      <TuixText size={TextSize.XL}>Test text</TuixText>
+      <TuixButton
+        variant={MainVariant.PRIMARY}
+        iconLeft={IconName.SAVE}
+        onCustomClick={() => console.log('clicked')}
+      >
+        Save
+      </TuixButton>
+    </>
+  );
 }
 ```
 
-### React .tsx without SSR
+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'`.
 
-```typescript jsx
-import { loadFonts } from 'tuix-webcomponents';
-loadFonts()
+The wrappers are generated by `scripts/build-react.ts` during `npm run build`
+and land in `package-build/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.
 
-function App() {
-  
-  return (
-    <tuix-text size="xl" type="headline" color="primary"></tuix-text>
-  )
-}
+### 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
+<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
+
+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 `package-build/`, and `npm run stage:package` copies that into `dist/`,
+which is 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 two steps are separate on purpose: `dist/` is also where the site is
+assembled, so the package build never writes it. Only the staging step does,
+and that runs inside `prepublishOnly` and `bin/publish.sh` — i.e. in the
+publish job, after the site has already been uploaded from its own job.
+
+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 build and staging 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
@@ -70,6 +148,16 @@ 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.
+
+Three builds, three folders, so none of them clears another: the site into
+`dist/` (`scripts/build.sh` — Storybook under `dist/storybook`, the docs export
+at the root), the npm package into `package-build/` (`npm run build`), and the
+dev compile into `build/` (`npm start`). `dist/` is reused for the package only
+by `npm run stage:package`, which runs in the publish job.
+
 
 ## Tooling configs
 
@@ -84,3 +172,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,3 +1,10 @@
+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, TuixRadioButtonOption, } 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 { TuixIcon } from './tuix-icon/TuixIcon.js';
 export { TuixButton } from './tuix-button/TuixButton.js';
@@ -6,4 +13,23 @@ 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 declare function loadFonts(): void;
+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, ThreeDotsLoaderConfig, TuixPaginationEvent, 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

@@ -6,19 +6,22 @@ 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 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 { 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 WrappedTuixText, TuixIcon as WrappedTuixIcon, TuixButton as WrappedTuixButton, TuixPaper as WrappedTuixPaper, TuixIconButton as WrappedTuixIconButton, TuixLink as WrappedTuixLink, TuixInput as WrappedTuixInput, TuixDropdown as WrappedTuixDropdown, TuixCheckbox as WrappedTuixCheckbox, TuixRadioButton as WrappedTuixRadioButton, TuixToggleButton as WrappedTuixToggleButton, TuixTable as WrappedTuixTable, TuixToast as WrappedTuixToast, TuixModal as WrappedTuixModal } from '../index.js';
+import type { DetailValue, DetailValueCheckbox, PaginationEventDetail, TuixDropdownPlainOption } from '../index.js';
+export declare const TuixText: import("@lit/react").ReactWebComponent<WrappedTuixText, {}>;
+export declare const TuixIcon: import("@lit/react").ReactWebComponent<WrappedTuixIcon, {}>;
+export declare const TuixButton: import("@lit/react").ReactWebComponent<WrappedTuixButton, {
+    onCustomClick: EventName<CustomEvent<undefined>>;
+}>;
+export declare const TuixPaper: import("@lit/react").ReactWebComponent<WrappedTuixPaper, {}>;
+export declare const TuixIconButton: import("@lit/react").ReactWebComponent<WrappedTuixIconButton, {
+    onCustomClick: EventName<CustomEvent<undefined>>;
+}>;
+export declare const TuixLink: import("@lit/react").ReactWebComponent<WrappedTuixLink, {}>;
+export declare const TuixInput: import("@lit/react").ReactWebComponent<WrappedTuixInput, {
+    onChange: EventName<CustomEvent<DetailValue<string>>>;
+    onBlur: EventName<CustomEvent<DetailValue<string>>>;
+    onClick: EventName<CustomEvent<undefined>>;
+}>;
+export declare const TuixDropdown: import("@lit/react").ReactWebComponent<WrappedTuixDropdown, {
+    onSelect: EventName<CustomEvent<DetailValue<TuixDropdownPlainOption>>>;
+    onInputSingle: EventName<CustomEvent<DetailValue<string>>>;
+}>;
+export declare const TuixCheckbox: import("@lit/react").ReactWebComponent<WrappedTuixCheckbox, {
+    onChange: EventName<CustomEvent<DetailValueCheckbox>>;
+}>;
+export declare const TuixRadioButton: import("@lit/react").ReactWebComponent<WrappedTuixRadioButton, {
+    onChange: EventName<CustomEvent<DetailValue<string>>>;
+}>;
+export declare const TuixToggleButton: import("@lit/react").ReactWebComponent<WrappedTuixToggleButton, {
+    onChange: EventName<CustomEvent<DetailValueCheckbox>>;
+}>;
+export declare const TuixTable: import("@lit/react").ReactWebComponent<WrappedTuixTable, {
+    onNextPage: EventName<CustomEvent<PaginationEventDetail>>;
+    onPreviousPage: EventName<CustomEvent<PaginationEventDetail>>;
+    onPageSizeChange: EventName<CustomEvent<PaginationEventDetail>>;
+}>;
+export declare const TuixToast: import("@lit/react").ReactWebComponent<WrappedTuixToast, {
+    onClose: EventName<CustomEvent<undefined>>;
+}>;
+export declare const TuixModal: import("@lit/react").ReactWebComponent<WrappedTuixModal, {
+    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 WrappedTuixText, TuixIcon as WrappedTuixIcon, TuixButton as WrappedTuixButton, TuixPaper as WrappedTuixPaper, TuixIconButton as WrappedTuixIconButton, TuixLink as WrappedTuixLink, TuixInput as WrappedTuixInput, TuixDropdown as WrappedTuixDropdown, TuixCheckbox as WrappedTuixCheckbox, TuixRadioButton as WrappedTuixRadioButton, TuixToggleButton as WrappedTuixToggleButton, TuixTable as WrappedTuixTable, TuixToast as WrappedTuixToast, TuixModal as WrappedTuixModal, } from '../index.js';
+export const TuixText = createComponent({
+    tagName: 'tuix-text',
+    elementClass: WrappedTuixText,
+    react: React,
+});
+export const TuixIcon = createComponent({
+    tagName: 'tuix-icon',
+    elementClass: WrappedTuixIcon,
+    react: React,
+});
+export const TuixButton = createComponent({
+    tagName: 'tuix-button',
+    elementClass: WrappedTuixButton,
+    react: React,
+    events: {
+        onCustomClick: 'customClick',
+    },
+});
+export const TuixPaper = createComponent({
+    tagName: 'tuix-paper',
+    elementClass: WrappedTuixPaper,
+    react: React,
+});
+export const TuixIconButton = createComponent({
+    tagName: 'tuix-icon-button',
+    elementClass: WrappedTuixIconButton,
+    react: React,
+    events: {
+        onCustomClick: 'customClick',
+    },
+});
+export const TuixLink = createComponent({
+    tagName: 'tuix-link',
+    elementClass: WrappedTuixLink,
+    react: React,
+});
+export const TuixInput = createComponent({
+    tagName: 'tuix-input',
+    elementClass: WrappedTuixInput,
+    react: React,
+    events: {
+        onChange: 'on-change',
+        onBlur: 'on-blur',
+        onClick: 'on-click',
+    },
+});
+export const TuixDropdown = createComponent({
+    tagName: 'tuix-dropdown',
+    elementClass: WrappedTuixDropdown,
+    react: React,
+    events: {
+        onSelect: 'select',
+        onInputSingle: 'input-single',
+    },
+});
+export const TuixCheckbox = createComponent({
+    tagName: 'tuix-checkbox',
+    elementClass: WrappedTuixCheckbox,
+    react: React,
+    events: {
+        onChange: 'change',
+    },
+});
+export const TuixRadioButton = createComponent({
+    tagName: 'tuix-radio-button',
+    elementClass: WrappedTuixRadioButton,
+    react: React,
+    events: {
+        onChange: 'change',
+    },
+});
+export const TuixToggleButton = createComponent({
+    tagName: 'tuix-toggle-button',
+    elementClass: WrappedTuixToggleButton,
+    react: React,
+    events: {
+        onChange: 'change',
+    },
+});
+export const TuixTable = createComponent({
+    tagName: 'tuix-table',
+    elementClass: WrappedTuixTable,
+    react: React,
+    events: {
+        onNextPage: 'next-page',
+        onPreviousPage: 'previous-page',
+        onPageSizeChange: 'page-size-change',
+    },
+});
+export const TuixToast = createComponent({
+    tagName: 'tuix-toast',
+    elementClass: WrappedTuixToast,
+    react: React,
+    events: {
+        onClose: 'on-close',
+    },
+});
+export const TuixModal = createComponent({
+    tagName: 'tuix-modal',
+    elementClass: WrappedTuixModal,
+    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';
+import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
+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';
+import { property, state } from 'lit/decorators.js';
+import { buttonTextColor } from './enums/tuix-button.enums';
+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

@@ -1,17 +1,11 @@
-import { LitElement, TemplateResult } from 'lit';
+import { type TemplateResult } from 'lit';
 import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
-import '../tuix-icon/TuixIcon.js';
-import { MainVariant } from '../utils/mainVariant.enum';
-export declare class TuixButton extends LitElement {
+import { TuixBaseButton } from './TuixBaseButton';
+export declare class TuixButton extends TuixBaseButton {
     static styles: import("lit").CSSResult[];
-    iconColor: string;
-    variant: MainVariant;
-    disabled: boolean;
+    full: boolean;
     iconRight?: IconName;
     iconLeft?: IconName;
-    private _getIconColor;
-    private _handleClick;
-    private _iconTemplate;
-    getButtonStyles(): string;
-    protected render(): TemplateResult;
+    protected _updateIconColor(): void;
+    protected _buttonContent(): TemplateResult;
 }