@covalent/components 0.0.0-COVALENT

package/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@nx/js/babel",
+      {
+        "useBuiltIns": "usage"
+      }
+    ]
+  ]
+}

package/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/.storybook/main.js

@@ -0,0 +1,34 @@
+const rootMain = require('../../../.storybook/main.js');
+const { mergeConfig } = require('vite');
+
+// Use the following syntax to add addons!
+(rootMain.stories = ['../**/*.stories.@(js|jsx|ts|tsx|mdx)']),
+  (rootMain.core = { builder: '@storybook/builder-vite' });
+module.exports = {
+  ...rootMain,
+  async viteFinal(config, { configType }) {
+    if (configType === 'PRODUCTION') {
+      // Set base URL for where it will be served in production
+      config.base = './';
+    }
+    // Merge custom configuration into the default config
+    return mergeConfig(config, {
+      //root: '../../',
+      cacheDir: '../../../node_modules/.vite-storybook',
+      // Use the same "resolve" configuration as your app
+      resolve: (await import('../vite.config.js')).default.resolve,
+      // Add dependencies to pre-optimization
+      optimizeDeps: {
+        include: ['storybook-dark-mode'],
+      },
+      server: {
+        fs: {
+          // Allow serving files from one level up to the project root
+          allow: ['../../'],
+        },
+      },
+      assetsInclude: ['/sb-preview/runtime.js', '**/*.html'],
+    });
+  },
+  framework: '@storybook/html-vite',
+};

package/.storybook/manager-head.html

@@ -0,0 +1,62 @@
+<link
+  href="https://cdn.jsdelivr.net/npm/@covalent/tokens@latest/index.css"
+  rel="stylesheet"
+/>
+<style>
+  /* Storybook theme overrides */
+  .sidebar-header {
+    max-width: 213px;
+  }
+  #root > div > div[role='main'] > div {
+    box-shadow: none;
+  }
+
+  .light #root > div > div[role='main'] > div {
+    border: 1px solid rgba(0, 0, 0, 0.12);
+  }
+  .dark #root > div > div[role='main'] > div {
+    border: 1px solid rgba(255, 255, 255, 0.12);
+  }
+
+  .light #storybook-explorer-tree .sidebar-item[data-selected='true'],
+  .light #storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
+    color: var(--cv-light-on-primary);
+  }
+  .dark #storybook-explorer-tree .sidebar-item[data-selected='true'],
+  .dark #storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
+    color: var(--cv-dark-on-primary);
+  }
+
+  .light #storybook-explorer-tree .sidebar-item[data-selected='true'],
+  .light #storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
+    color: var(--cv-light-on-primary);
+  }
+  .dark #storybook-explorer-tree .sidebar-item[data-selected='true'],
+  .dark #storybook-explorer-tree .sidebar-item[data-selected='true'] svg {
+    color: var(--cv-dark-on-primary);
+  }
+
+  .light #storybook-explorer-tree .sidebar-item[data-selected='false'] svg {
+    color: var(--cv-light-secondary);
+  }
+
+  .dark #storybook-explorer-tree .sidebar-item[data-selected='false'] svg {
+    color: var(--cv-dark-secondary);
+  }
+
+  .light #storybook-explorer-tree .sidebar-item[data-selected='false'] {
+    color: var(--cv-light-secondary);
+  }
+
+  .dark
+    #storybook-explorer-tree
+    .sidebar-item:hover:not([data-selected='true']) {
+    background: var(--cv-theme-dark-colors-on-surface-8);
+  }
+
+  .light
+    #storybook-explorer-tree
+    .sidebar-item:hover:not([data-selected='true']) {
+    background: var(--cv-theme-light-colors-on-surface-8);
+  }
+</style>

package/.storybook/manager.js

@@ -0,0 +1 @@
+import '../../../.storybook/manager';

package/.storybook/preview-head.html

@@ -0,0 +1,20 @@
+<!-- Inter Font Typography & Material Icons Rounded Font --->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
+  rel="stylesheet"
+/>
+<link
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block"
+  rel="stylesheet"
+/>
+
+<script>
+  window.global = window;
+  window.process = {
+    env: {
+      NODE_ENV: 'test',
+    },
+  };
+</script>

package/.storybook/preview.js

@@ -0,0 +1,20 @@
+import { parameters as mainParameters } from '../../../.storybook/preview';
+
+import '../../icons/covalent-icons.scss';
+import '../../../.storybook/theme/theme.scss';
+
+export const parameters = {
+  options: {
+    storySort: {
+      order: [
+        'Overview',
+        'Introduction',
+        'Guides',
+        'Patterns',
+        'Basics',
+        'Components',
+      ],
+    },
+  },
+  ...mainParameters,
+};

package/README.md

@@ -0,0 +1,179 @@
+# Covalent components
+
+Covalent components is a coded implementation of Covalent Design System using [lit](https://lit.dev/) framework to compile to native HTML elements, ready to use any where HTML is supported with no framework lock-in.
+
+## 🚀 Quick Start: CDN (60 Seconds)
+
+Jump in immediately using a CDN. Perfect for prototyping, CodePens, or simple projects:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <!-- Latest full bundle -->
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@covalent/components@latest/+esm"></script>
+
+    <!-- Optional theme (choose light/dark) -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@covalent/components@latest/theme/prebuilt/light-theme.css" />
+  </head>
+  <body>
+    <!-- Start using components! -->
+    <cv-button label="Get Started" icon="rocket" raised></cv-button>
+    <cv-alert heading="Pro Tip" type="success"> Check our Storybook for component playgrounds! </cv-alert>
+  </body>
+</html>
+```
+
+### Need Just One Component?
+
+Optimize load times by importing only what you need:
+
+```html
+<!-- just include the button component -->
+<script type="module" src="https://cdn.jsdelivr.net/npm/@covalent/components@latest/button.mjs"></script>
+```
+
+### 📦 Production Setup (npm/yarn)
+
+Use your favorite package management tool to add covalent components to your project.
+
+```bash
+# Using npm
+npm install --save @covalent/components
+
+# Using yarn
+yarn add @covalent/components
+```
+
+### Using with Angular
+
+Applications using angular can use covalent components in the same way they use HTML elements today adding [`CUSTOM_ELEMENTS_SCHEMA`](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA) schema to any Angular module or standalone component.
+
+```javascript
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { AppComponent } from './app.component';
+
+import '@covalent/components/button';
+
+@component({
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: '<cv-button label="Hello world" raised></cv-button>',
+})
+export class AppComponent {}
+```
+
+### Using with React
+
+While Covalent web components work directly in React, for optimal TypeScript support and React-centric APIs, we recommend using our dedicated React wrapper library. This provides:
+
+✅ Native React prop handling  
+✅ First-class event binding  
+✅ Full TS type definitions  
+✅ Component documentation in JSX format
+
+```jsx
+// Example usage
+import { CovalentButton, CovalentSwitch } from '@covalent/components-react';
+
+function App() {
+  return (
+    <>
+      <CovalentSwitch checked onChange={(e) => console.log(e.detail)} />
+      <CovalentButton label="React Power" onClick={() => alert('Works like regular React components!')} />
+    </>
+  );
+}
+```
+
+**Get Started with React:**  
+📚 See the [Full React Components Documentation](https://github.com/Teradata/covalent/blob/main/libs/components-react/README.md)
+
+```bash
+npm install @covalent/components-react
+# or
+yarn add @covalent/components-react
+```
+
+### 🧩 Component Catalog
+
+Importing individual Covalent web components is supported and encouraged for production deployments. By importing only the components you need, you can reduce the overall code size and improve the performance of your application.
+
+Here is a table listing the imports for Covalent web components:
+
+| Component Name     | Selector                | Path                                      |
+| ------------------ | ----------------------- | ----------------------------------------- |
+| ActionRibbon       | cv-action-ribbon        | @covalent/components/action-ribbon        |
+| Alert              | cv-alert                | @covalent/components/alert                |
+| AppShell           | cv-app-shell            | @covalent/components/app-shell            |
+| Badge              | cv-badge                | @covalent/components/badge                |
+| Button             | cv-button               | @covalent/components/button               |
+| Card               | cv-card                 | @covalent/components/card                 |
+| Checkbox           | cv-checkbox             | @covalent/components/checkbox             |
+| Chip               | cv-chip                 | @covalent/components/chip                 |
+| ChipSet            | cv-chip-set             | @covalent/components/chip-set             |
+| CircularProgress   | cv-circular-progress    | @covalent/components/circular-progress    |
+| CodeEditor         | cv-code-editor          | @covalent/components/code-editor          |
+| CodeSnippet        | cv-code-snippet         | @covalent/components/code-snippet         |
+| Drawer             | cv-drawer               | @covalent/components/drawer               |
+| Dialog             | cv-dialog               | @covalent/components/dialog               |
+| EmptyState         | cv-empty-state          | @covalent/components/empty-state          |
+| ExpansionPanel     | cv-expansion-panel      | @covalent/components/expansion-panel      |
+| ExpansionPanelItem | cv-expansion-panel-item | @covalent/components/expansion-panel-item |
+| FocusedPage        | cv-focused-page         | @covalent/components/focused-page         |
+| Formfield          | cv-formfield            | @covalent/components/formfield            |
+| FullscreenDialog   | cv-full-screen-dialog   | @covalent/components/full-screen-dialog   |
+| Icon               | cv-icon                 | @covalent/components/icon                 |
+| IconButton         | cv-icon-button          | @covalent/component/icon-button           |
+| IconButtonToggle   | cv-icon-button-toggle   | @covalent/components/icon-button-toggle   |
+| IconCheckToggle    | cv-checkbox-icon        | @covalent/components/icon-check-toggle    |
+| IconLockup         | cv-icon-lockup          | @covalent/components/icon-lockup          |
+| IconRadioToggle    | cv-radio-icon           | @covalent/components/icon-radio-toggle    |
+| LinearProgress     | cv-linear-progress      | @covalent/components/linear-progress      |
+| List               | cv-list                 | @covalent/components/list                 |
+| ListItem           | cv-list-item            | @covalent/components/list-item            |
+| CheckListItem      | cv-check-list-item      | @covalent/components/check-list-item      |
+| RadioListItem      | cv-radio-list-item      | @covalent/components/radio-list-item      |
+| NavRailListItem    | cv-nav-list-item        | @covalent/components/nav-list-item        |
+| Menu               | cv-menu                 | @covalent/components/menu                 |
+| NotebookCell       | cv-notebook-cell        | @covalent/components/notebook-cell        |
+| Radio              | cv-radio                | @covalent/components/radio                |
+| Select             | cv-select               | @covalent/components/select               |
+| SideSheet          | cv-side-sheet           | @covalent/components/side-sheet           |
+| Slider             | cv-slider               | @covalent/components/slider               |
+| SliderRange        | cv-slider-range         | @covalent/components/slider-range         |
+| Snackbar           | cv-snackbar             | @covalent/components/snackbar             |
+| StatusDialog       | cv-status-dialog        | @covalent/components/status-dialog        |
+| StatusHeader       | cv-status-header        | @covalent/components/status-header        |
+| StatusHeaderItem   | cv-status-header-item   | @covalent/components/status-header-item   |
+| Switch             | cv-switch               | @covalent/components/switch               |
+| Tab                | cv-tab                  | @covalent/components/tab                  |
+| TabBar             | CovalentTabBar          | @covalent/components/tab-bar              |
+| TextLockup         | cv-text-lockup          | @covalent/components/text-lockup          |
+| TextArea           | cv-textarea             | @covalent/components/textarea             |
+| TextField          | cv-textfield            | @covalent/components/textfield            |
+| Toolbar            | cv-toolbar              | @covalent/components/toolbar              |
+| Tooltip            | cv-tooltip              | @covalent/components/tooltip              |
+| TopAppBar          | cv-top-app-bar          | @covalent/components/top-app-bar          |
+| TopAppBarFixed     | cv-top-app-bar-fixed    | @covalent/components/top-app-bar-fixed    |
+| TreeList           | cv-tree-list            | @covalent/components/tree-list            |
+| TreeListItem       | cv-tree-list-item       | @covalent/components/tree-list-item       |
+| Typography         | cv-typography           | @covalent/components/typography           |
+
+## Running the storybook docs
+
+Run `nx storybook components` to start the main storybook documentation site for this project
+
+## Running the build
+
+Run `nx build components` to get a publishable set of build assets using webpack
+
+## Running linting
+
+Run `nx lint components` to execute the linting via [ESlint](https://eslint.org/)
+
+Run `nx scsslint components` to execute scsslint via [Stylelint](https://stylelint.io/)
+
+## Running unit tests
+
+Run `nx test components` to execute the unit tests via [Jest](https://jestjs.io).

package/component-config.json

@@ -0,0 +1,313 @@
+[
+  {
+    "name": "CovalentActionRibbon",
+    "selector": "cv-action-ribbon",
+    "path": "./action-ribbon/action-ribbon"
+  },
+  {
+    "name": "CovalentAlert",
+    "selector": "cv-alert",
+    "path": "./alert/alert"
+  },
+  {
+    "name": "CovalentAppShell",
+    "selector": "cv-app-shell",
+    "path": "./app-shell/app-shell",
+    "events": ["toggle"]
+  },
+  {
+    "name": "CovalentBadge",
+    "selector": "cv-badge",
+    "path": "./badge/badge"
+  },
+  {
+    "name": "CovalentButton",
+    "selector": "cv-button",
+    "path": "./button/button"
+  },
+  {
+    "name": "CovalentCard",
+    "selector": "cv-card",
+    "path": "./card/card"
+  },
+  {
+    "name": "CovalentCheckbox",
+    "selector": "cv-checkbox",
+    "path": "./checkbox/checkbox",
+    "events": ["change"]
+  },
+  {
+    "name": "CovalentChip",
+    "selector": "cv-chip",
+    "path": "./chips/chip"
+  },
+  {
+    "name": "CovalentChipSet",
+    "selector": "cv-chip-set",
+    "path": "./chips/chip-set"
+  },
+  {
+    "name": "CovalentCircularProgress",
+    "selector": "cv-circular-progress",
+    "path": "./circular-progress/circular-progress"
+  },
+  {
+    "name": "CovalentCodeEditor",
+    "selector": "cv-code-editor",
+    "path": "./code-editor/code-editor",
+    "events": ["editor-ready", "editor-focus", "editor-blur", "code-change"]
+  },
+  {
+    "name": "CovalentCodeSnippet",
+    "selector": "cv-code-snippet",
+    "path": "./code-snippet/code-snippet"
+  },
+  {
+    "name": "CovalentDrawer",
+    "selector": "cv-drawer",
+    "path": "./drawer/drawer",
+    "events": ["opened", "closed"]
+  },
+  {
+    "name": "CovalentDialog",
+    "selector": "cv-dialog",
+    "path": "./dialog/dialog",
+    "events": ["opening", "opened", "closing", "closed"]
+  },
+  {
+    "name": "CovalentEmptyState",
+    "selector": "cv-empty-state",
+    "path": "./empty-state/empty-state"
+  },
+  {
+    "name": "CovalentExpansionPanel",
+    "selector": "cv-expansion-panel",
+    "path": "./expansion-panel/expansion-panel"
+  },
+  {
+    "name": "CovalentExpansionPanelItem",
+    "selector": "cv-expansion-panel-item",
+    "path": "./expansion-panel/expansion-panel-item",
+    "events": ["cv-expansionPanel-togglePanel"]
+  },
+  {
+    "name": "CovalentFocusedPage",
+    "selector": "cv-focused-page",
+    "path": "./focused-page/focused-page"
+  },
+  {
+    "name": "CovalentFormfield",
+    "selector": "cv-formfield",
+    "path": "./formfield/formfield"
+  },
+  {
+    "name": "CovalentFullscreenDialog",
+    "selector": "cv-full-screen-dialog",
+    "path": "./full-screen-dialog/full-screen-dialog",
+    "events": ["opening", "opened", "closing", "closed"]
+  },
+  {
+    "name": "CovalentIcon",
+    "selector": "cv-icon",
+    "path": "./icon/icon"
+  },
+  {
+    "name": "CovalentIconButton",
+    "selector": "cv-icon-button",
+    "path": "./icon-button/icon-button"
+  },
+  {
+    "name": "CovalentIconButtonToggle",
+    "selector": "cv-icon-button-toggle",
+    "path": "./icon-button-toggle/icon-button-toggle",
+    "events": ["icon-button-toggle-change"]
+  },
+  {
+    "name": "CovalentIconCheckToggle",
+    "selector": "cv-checkbox-icon",
+    "path": "./icon-checkbox/icon-check-toggle",
+    "events": ["change"]
+  },
+  {
+    "name": "CovalentIconLockup",
+    "selector": "cv-icon-lockup",
+    "path": "./icon-lockup/icon-lockup"
+  },
+  {
+    "name": "CovalentIconRadioToggle",
+    "selector": "cv-radio-icon",
+    "path": "./icon-radio/icon-radio-toggle",
+    "events": ["change"]
+  },
+  {
+    "name": "CovalentLinearProgress",
+    "selector": "cv-linear-progress",
+    "path": "./linear-progress/linear-progress"
+  },
+  {
+    "name": "CovalentList",
+    "selector": "cv-list",
+    "path": "./list/list",
+    "events": ["action", "selected"]
+  },
+  {
+    "name": "CovalentListItem",
+    "selector": "cv-list-item",
+    "path": "./list/list-item",
+    "events": ["request-selected"]
+  },
+  {
+    "name": "CovalentCheckListItem",
+    "selector": "cv-check-list-item",
+    "path": "./list/check-list-item",
+    "events": ["request-selected"]
+  },
+  {
+    "name": "CovalentRadioListItem",
+    "selector": "cv-radio-list-item",
+    "path": "./list/radio-list-item",
+    "events": ["request-selected"]
+  },
+  {
+    "name": "CovalentNavRailListItem",
+    "selector": "cv-nav-list-item",
+    "path": "./list/nav-list-item",
+    "events": ["request-selected"]
+  },
+  {
+    "name": "CovalentMenu",
+    "selector": "cv-menu",
+    "path": "./menu/menu",
+    "events": ["opened", "closing", "closed", "action", "selected"]
+  },
+  {
+    "name": "CovalentNotebookCell",
+    "selector": "cv-notebook-cell",
+    "path": "./notebook-cell/notebook-cell"
+  },
+  {
+    "name": "CovalentRadio",
+    "selector": "cv-radio",
+    "path": "./radio/radio",
+    "events": ["change"]
+  },
+  {
+    "name": "CovalentSelect",
+    "selector": "cv-select",
+    "path": "./select/select",
+    "events": ["opened", "closed", "selected"]
+  },
+  {
+    "name": "CovalentSideSheet",
+    "selector": "cv-side-sheet",
+    "path": "./side-sheet/side-sheet",
+    "events": ["opening", "opened", "closing", "closed"]
+  },
+  {
+    "name": "CovalentSlider",
+    "selector": "cv-slider",
+    "path": "./slider/slider",
+    "events": ["input", "change"]
+  },
+  {
+    "name": "CovalentSliderRange",
+    "selector": "cv-slider-range",
+    "path": "./slider/slider-range",
+    "events": ["input", "change"]
+  },
+  {
+    "name": "CovalentSnackbar",
+    "selector": "cv-snackbar",
+    "path": "./snackbar/snackbar",
+    "events": ["opening", "opened", "closing", "closed"]
+  },
+  {
+    "name": "CovalentStatusDialog",
+    "selector": "cv-status-dialog",
+    "path": "./status-dialog/status-dialog",
+    "events": ["opening", "opened", "closing", "closed"]
+  },
+  {
+    "name": "CovalentStatusHeader",
+    "selector": "cv-status-header",
+    "path": "./status-header/status-header"
+  },
+  {
+    "name": "CovalentStatusHeaderItem",
+    "selector": "cv-status-header-item",
+    "path": "./status-header/status-header-item"
+  },
+  {
+    "name": "CovalentSwitch",
+    "selector": "cv-switch",
+    "path": "./switch/switch"
+  },
+  {
+    "name": "CovalentTab",
+    "selector": "cv-tab",
+    "path": "./tab/tab",
+    "events": ["interacted"]
+  },
+  {
+    "name": "CovalentTabBar",
+    "selector": "cv-tab-bar",
+    "path": "./tab/tab-bar",
+    "events": ["activated"]
+  },
+  {
+    "name": "CovalentTextLockup",
+    "selector": "cv-text-lockup",
+    "path": "./text-lockup/text-lockup"
+  },
+  {
+    "name": "CovalentTextArea",
+    "selector": "cv-textarea",
+    "path": "./textarea/textarea"
+  },
+  {
+    "name": "CovalentTextField",
+    "selector": "cv-textfield",
+    "path": "./textfield/textfield"
+  },
+  {
+    "name": "CovalentToolbar",
+    "selector": "cv-toolbar",
+    "path": "./toolbar/toolbar",
+    "events": ["nav"]
+  },
+  {
+    "name": "CovalentTooltip",
+    "selector": "cv-tooltip",
+    "path": "./tooltip/tooltip"
+  },
+  {
+    "name": "CovalentTopAppBar",
+    "selector": "cv-top-app-bar",
+    "path": "./top-app-bar/top-app-bar",
+    "events": ["nav"]
+  },
+  {
+    "name": "CovalentTopAppBarFixed",
+    "selector": "cv-top-app-bar-fixed",
+    "path": "./top-app-bar/top-app-bar-fixed",
+    "events": ["nav"]
+  },
+  {
+    "name": "CovalentTreeList",
+    "selector": "cv-tree-list",
+    "path": "./tree-list/tree-list",
+    "events": ["nav"]
+  },
+  {
+    "name": "CovalentTreeListItem",
+    "selector": "cv-tree-list-item",
+    "path": "./tree-list/tree-list-item",
+    "events": ["select"]
+  },
+  {
+    "name": "CovalentTypography",
+    "selector": "cv-typography",
+    "path": "./typography/typography",
+    "events": ["select"]
+  }
+]