@nordhealth/components 4.0.0-alpha.2 → 4.0.0

package/lib/vue.d.ts

@@ -0,0 +1,420 @@
+import type * as Components from "./src/index"
+import type { LitElement } from "lit"
+import type { DefineComponent } from "vue"
+
+type WCProps<TWebComponent extends HTMLElement> = Partial<Omit<TWebComponent, keyof LitElement | "render">>
+
+interface NordComponents {
+  "nord-avatar": DefineComponent<WCProps<Components.Avatar> & {}>
+
+  "nord-badge": DefineComponent<WCProps<Components.Badge> & {}>
+
+  "nord-banner": DefineComponent<WCProps<Components.Banner> & {}>
+
+  "nord-button": DefineComponent<WCProps<Components.Button> & {}>
+
+  "nord-button-group": DefineComponent<WCProps<Components.ButtonGroup> & {}>
+
+  "nord-calendar": DefineComponent<
+    WCProps<Components.Calendar> & {
+      /**
+       * Dispatched when a date is selected and the value changes.
+       */
+      onChange?: (event: Event) => void
+
+      /**
+       * Dispatched when the calendar's focused date changes.
+       */
+      onNordFocusDate?: (event: Event) => void
+    }
+  >
+
+  "nord-card": DefineComponent<WCProps<Components.Card> & {}>
+
+  "nord-checkbox": DefineComponent<
+    WCProps<Components.Checkbox> & {
+      /**
+       * Fired whenever the input's value is changed via user interaction.
+       */
+      onChange?: (event: Event) => void
+
+      /**
+       * Fired as the user types into the input.
+       */
+      onInput?: (event: Event) => void
+    }
+  >
+
+  "nord-command-menu": DefineComponent<
+    WCProps<Components.CommandMenu> & {
+      /**
+       * The command menu was closed.
+       */
+      onClose?: (event: Event) => void
+
+      /**
+       * User selected a command from the menu.
+       */
+      onNordSelect?: (event: Event) => void
+
+      /**
+       * The command menu was opened.
+       */
+      onOpen?: (event: Event) => void
+    }
+  >
+
+  "nord-date-picker": DefineComponent<
+    WCProps<Components.DatePicker> & {
+      /**
+       * Fired whenever the input's value is changed via user interaction.
+       */
+      onChange?: (event: Event) => void
+
+      /**
+       * Dispatched when the popout is closed.
+       */
+      onClose?: (event: Event) => void
+
+      /**
+       * Fired as the user types into the input.
+       */
+      onInput?: (event: Event) => void
+
+      /**
+       * Dispatched when the calendar's focused date changes.
+       */
+      onNordFocusDate?: (event: Event) => void
+
+      /**
+       * Dispatched when the popout is opened.
+       */
+      onOpen?: (event: Event) => void
+    }
+  >
+
+  "nord-divider": DefineComponent<WCProps<Components.Divider> & {}>
+
+  "nord-drawer": DefineComponent<WCProps<Components.Drawer> & {}>
+
+  "nord-dropdown": DefineComponent<
+    WCProps<Components.Dropdown> & {
+      /**
+       * Dispatched when the popout is closed.
+       */
+      onClose?: (event: Event) => void
+
+      /**
+       * Dispatched when the popout is opened.
+       */
+      onOpen?: (event: Event) => void
+    }
+  >
+
+  "nord-dropdown-group": DefineComponent<WCProps<Components.DropdownGroup> & {}>
+
+  "nord-dropdown-item": DefineComponent<WCProps<Components.DropdownItem> & {}>
+
+  "nord-empty-state": DefineComponent<WCProps<Components.EmptyState> & {}>
+
+  "nord-fieldset": DefineComponent<WCProps<Components.Fieldset> & {}>
+
+  "nord-footer": DefineComponent<WCProps<Components.Footer> & {}>
+
+  "nord-header": DefineComponent<WCProps<Components.Header> & {}>
+
+  "nord-icon": DefineComponent<WCProps<Components.Icon> & {}>
+
+  "nord-input": DefineComponent<
+    WCProps<Components.Input> & {
+      /**
+       * Fired whenever the input's value is changed via user interaction.
+       */
+      onChange?: (event: Event) => void
+
+      /**
+       * Fired as the user types into the input.
+       */
+      onInput?: (event: Event) => void
+
+      /**
+       * Fired when some text has been selected.
+       */
+      onSelect?: (event: Event) => void
+    }
+  >
+
+  "nord-layout": DefineComponent<WCProps<Components.Layout> & {}>
+
+  "nord-message": DefineComponent<WCProps<Components.Message> & {}>
+
+  "nord-modal": DefineComponent<
+    WCProps<Components.Modal> & {
+      /**
+       * Dispatched before the modal has closed when a user attempts to dismiss a modal. Call `preventDefault()` on the event to prevent the modal closing.
+       */
+      onCancel?: (event: Event) => void
+
+      /**
+       * Dispatched when a modal is closed for any reason.
+       */
+      onClose?: (event: Event) => void
+    }
+  >
+
+  "nord-nav-group": DefineComponent<
+    WCProps<Components.NavGroup> & {
+      /**
+       * Dispatched whenever a nav item has been marked as active
+       */
+      onActivate?: (event: Event) => void
+
+      /**
+       * Dispatched whenever a nav item's state changes between open and closed.
+       */
+      onToggle?: (event: Event) => void
+    }
+  >
+
+  "nord-navigation": DefineComponent<
+    WCProps<Components.Navigation> & {
+      /**
+       * Dispatched whenever a nav item has been marked as active
+       */
+      onActivate?: (event: Event) => void
+
+      /**
+       * Dispatched whenever a nav item's state changes between open and closed.
+       */
+      onToggle?: (event: Event) => void
+    }
+  >
+
+  "nord-nav-item": DefineComponent<
+    WCProps<Components.NavItem> & {
+      /**
+       * Dispatched whenever a nav item has been marked as active
+       */
+      onActivate?: (event: Event) => void
+
+      /**
+       * Dispatched whenever a nav item's state changes between open and closed.
+       */
+      onToggle?: (event: Event) => void
+    }
+  >
+
+  "nord-nav-toggle": DefineComponent<WCProps<Components.NavToggle> & {}>
+
+  "nord-notification": DefineComponent<
+    WCProps<Components.Notification> & {
+      /**
+       * Fired when the notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.
+       */
+      onDismiss?: (event: Event) => void
+    }
+  >
+
+  "nord-notification-group": DefineComponent<
+    WCProps<Components.NotificationGroup> & {
+      /**
+       * Fired when a notification is dismissed, and its exit animation has completed. This event should be used to remove the dismissed notification from the DOM.
+       */
+      onDismiss?: (event: Event) => void
+    }
+  >
+
+  "nord-popout": DefineComponent<
+    WCProps<Components.Popout> & {
+      /**
+       * Dispatched when the popout is closed.
+       */
+      onClose?: (event: Event) => void
+
+      /**
+       * Dispatched when the popout is opened.
+       */
+      onOpen?: (event: Event) => void
+    }
+  >
+
+  "nord-progress-bar": DefineComponent<WCProps<Components.ProgressBar> & {}>
+
+  "nord-qrcode": DefineComponent<WCProps<Components.Qrcode> & {}>
+
+  "nord-radio": DefineComponent<
+    WCProps<Components.Radio> & {
+      /**
+       * Fired whenever the input's value is changed via user interaction.
+       */
+      onChange?: (event: Event) => void
+
+      /**
+       * Fired as the user types into the input.
+       */
+      onInput?: (event: Event) => void
+    }
+  >
+
+  "nord-range": DefineComponent<
+    WCProps<Components.Range> & {
+      /**
+       * Fired whenever the input's value is changed via user interaction.
+       */
+      onChange?: (event: Event) => void
+
+      /**
+       * Fired as the user types into the input.
+       */
+      onInput?: (event: Event) => void
+    }
+  >
+
+  "nord-segmented-control": DefineComponent<
+    WCProps<Components.SegmentedControl> & {
+      /**
+       * Fired whenever a segmented control item has been checked.
+       */
+      onChange?: (event: Event) => void
+    }
+  >
+
+  "nord-segmented-control-item": DefineComponent<
+    WCProps<Components.SegmentedControlItem> & {
+      /**
+       * Fired whenever the segmented control item has been checked.
+       */
+      onChange?: (event: Event) => void
+
+      /**
+       * Fired as the user types into the input.
+       */
+      onInput?: (event: Event) => void
+    }
+  >
+
+  "nord-select": DefineComponent<
+    WCProps<Components.Select> & {
+      /**
+       * Fired whenever the input's value is changed via user interaction.
+       */
+      onChange?: (event: Event) => void
+
+      /**
+       * Fired as the user types into the input.
+       */
+      onInput?: (event: Event) => void
+    }
+  >
+
+  "nord-skeleton": DefineComponent<WCProps<Components.Skeleton> & {}>
+
+  "nord-spinner": DefineComponent<WCProps<Components.Spinner> & {}>
+
+  "nord-stack": DefineComponent<WCProps<Components.Stack> & {}>
+
+  "nord-tab": DefineComponent<WCProps<Components.Tab> & {}>
+
+  "nord-tab-group": DefineComponent<WCProps<Components.TabGroup> & {}>
+
+  "nord-table": DefineComponent<WCProps<Components.Table> & {}>
+
+  "nord-tab-panel": DefineComponent<WCProps<Components.TabPanel> & {}>
+
+  "nord-tag": DefineComponent<
+    WCProps<Components.Tag> & {
+      /**
+       * Fired whenever the tag has been checked or unchecked via user interaction.
+       */
+      onChange?: (event: Event) => void
+
+      /**
+       * Fired when the remove button is activated. This event should be used to remove the tag from the DOM.
+       */
+      onRemove?: (event: Event) => void
+    }
+  >
+
+  "nord-tag-group": DefineComponent<
+    WCProps<Components.TagGroup> & {
+      /**
+       * Fired whenever a tag has been checked or unchecked via user interaction.
+       */
+      onChange?: (event: Event) => void
+
+      /**
+       * Fired when the remove button is activated on a tag. This event should be used to remove the tag from the DOM.
+       */
+      onRemove?: (event: Event) => void
+    }
+  >
+
+  "nord-textarea": DefineComponent<
+    WCProps<Components.Textarea> & {
+      /**
+       * Fired whenever the input's value is changed via user interaction.
+       */
+      onChange?: (event: Event) => void
+
+      /**
+       * Fired as the user types into the input.
+       */
+      onInput?: (event: Event) => void
+
+      /**
+       * Fired when some text has been selected.
+       */
+      onSelect?: (event: Event) => void
+    }
+  >
+
+  "nord-toast": DefineComponent<
+    WCProps<Components.Toast> & {
+      /**
+       * Fired when the toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.
+       */
+      onDismiss?: (event: Event) => void
+    }
+  >
+
+  "nord-toast-group": DefineComponent<
+    WCProps<Components.ToastGroup> & {
+      /**
+       * Fired when a toast is dismissed (via user action or auto-dismiss), and its exit animation has completed. This event should be used to remove the dismissed toast from the DOM.
+       */
+      onDismiss?: (event: Event) => void
+    }
+  >
+
+  "nord-toggle": DefineComponent<
+    WCProps<Components.Toggle> & {
+      /**
+       * Fired whenever the input's value is changed via user interaction.
+       */
+      onChange?: (event: Event) => void
+
+      /**
+       * Fired as the user types into the input.
+       */
+      onInput?: (event: Event) => void
+    }
+  >
+
+  "nord-tooltip": DefineComponent<WCProps<Components.Tooltip> & {}>
+
+  "nord-top-bar": DefineComponent<WCProps<Components.TopBar> & {}>
+
+  "nord-visually-hidden": DefineComponent<WCProps<Components.VisuallyHidden> & {}>
+}
+
+declare module "vue" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface GlobalComponents extends NordComponents {}
+}
+
+declare global {
+  namespace JSX {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IntrinsicElements extends NordComponents {}
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nordhealth/components",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0",
   "description": "This package includes Nord Design System Web Components",
   "author": "Nordhealth <support@nordhealth.design>",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -20,7 +20,7 @@
     "start": "concurrently -k -n TSC,HTTP -c blue.bold,magenta.bold \"tsc -w --noEmit\" \"wds\"",
     "prebuild": "pnpm clean",
     "build": "rollup -c",
-    "postbuild": "pnpm analyze",
+    "postbuild": "pnpm analyze && pnpm build:react-types && pnpm build:vue-types",
     "build:docker": "docker compose build test",
     "clean": "rm -rf lib/",
     "clean:snapshots": "rm -rf src/*/screenshots/*/failed/*.png",
@@ -30,30 +30,32 @@
     "test:capture": "pnpm test -- --update-visual-baseline",
     "test:local": "wtr --coverage --watch",
     "analyze": "custom-elements-manifest analyze --litelement",
-    "scaffold": "node ./utils/scaffold.mjs"
+    "scaffold": "node ./scripts/scaffold.mjs",
+    "build:react-types": "node ./scripts/build-react-types.mjs",
+    "build:vue-types": "node ./scripts/build-vue-types.mjs"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.11",
-    "@nordhealth/icons": "^3.7.0",
-    "@paulmillr/qr": "^0.3.0",
-    "lit": "^3.2.0",
+    "@floating-ui/dom": "^1.6.13",
+    "@nordhealth/icons": "^3.7.1",
+    "lit": "^3.3.0",
+    "qr": "^0.4.2",
     "tinykeys": "^1.4.0"
   },
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.10.3",
+    "@custom-elements-manifest/analyzer": "^0.10.4",
     "@lit-labs/testing": "^0.2.7",
-    "@nordhealth/css": "^4.0.0-alpha.2",
-    "@nordhealth/fonts": "^3.0.2",
-    "@nordhealth/themes": "^9.0.0-alpha.2",
-    "@nordhealth/tokens": "^8.0.0-alpha.2",
+    "@nordhealth/css": "^4.0.0",
+    "@nordhealth/fonts": "^3.0.3",
+    "@nordhealth/themes": "^9.0.0",
+    "@nordhealth/tokens": "^8.0.0",
     "@open-wc/eslint-config": "^12.0.3",
     "@open-wc/testing": "^4.0.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/mocha": "^10.0.8",
-    "@types/node": "^22.5.5",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^22.15.3",
     "@typescript-eslint/eslint-plugin": "^8.6.0",
     "@typescript-eslint/parser": "^8.6.0",
     "@web/dev-server": "^0.4.6",
@@ -62,14 +64,14 @@
     "@web/test-runner": "~0.16.1",
     "@web/test-runner-commands": "~0.7.0",
     "@web/test-runner-visual-regression": "~0.8.3",
-    "concurrently": "^9.0.1",
+    "concurrently": "^9.1.2",
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-lit": "^1.15.0",
     "eslint-plugin-lit-a11y": "^4.1.4",
     "eslint-plugin-wc": "^1.5.0",
-    "glob": "^11.0.0",
+    "glob": "^11.0.2",
     "prettier": "^3.3.3",
     "rollup": "~4.21.3",
     "rollup-plugin-lit-css": "^5.0.1",
@@ -176,5 +178,5 @@
       }
     ]
   },
-  "gitHead": "9ab4379321de78115736f8500aaa5a6c3e3f89fe"
+  "gitHead": "8cae3cda227b8a90d2dff83870aabc9658b87247"
 }