Merge branch 'main' into olaf/combobox-angular-highlight

Signed-off-by: Olaf Kappes <okappes@qti.qualcomm.com>

Author: olaf-k

.webstorm/bookmarks.json

@@ -176,13 +176,13 @@
       {
         "description": "angular-docs",
         "provider": "com.intellij.ide.bookmark.providers.LineBookmarkProvider",
-        "url": "file://$PROJECT_DIR$/packages/docs/angular-docs/src/routes/components+/badge+",
+        "url": "file://$PROJECT_DIR$/packages/docs/angular-docs/src/routes/components+/badges+",
         "line": "-1"
       },
       {
         "description": "react-docs",
         "provider": "com.intellij.ide.bookmark.providers.LineBookmarkProvider",
-        "url": "file://$PROJECT_DIR$/packages/docs/react-docs/src/routes/components+/badge+",
+        "url": "file://$PROJECT_DIR$/packages/docs/react-docs/src/routes/components+/badges+",
         "line": "-1"
       },
       {

packages/common/qds-core/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @qualcomm-ui/qds-core
 
+## 1.5.0 (2025/11/24)
+
+### Features
+
+- add badge component
+
+### Bug Fixes
+
+- [badge]: categories > colors
+
 ## 1.4.2 (2025/11/21)
 
 ### Miscellaneous Chores

packages/common/qds-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qualcomm-ui/qds-core",
-  "version": "1.4.2",
+  "version": "1.5.0",
   "description": "qds core components",
   "repository": "https://github.com/qualcomm/qualcomm-ui",
   "author": "Ryan Bower",

packages/common/qds-core/src/avatar/qds-avatar.css

@@ -7,10 +7,10 @@
   flex-shrink: 0;
   height: var(--avatar-size);
   justify-content: center;
+  padding: 0;
   position: relative;
   user-select: none;
   vertical-align: top;
-
   width: var(--avatar-size);
   --avatar-radius: 9999px;
 

packages/common/qds-core/src/badge/badge.classes.ts

@@ -0,0 +1,7 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+export const badgeClasses = {
+  icon: "qui-badge__icon",
+  root: "qui-badge__root",
+} as const

packages/common/qds-core/src/badge/badge.types.ts

@@ -0,0 +1,37 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import type {badgeClasses} from "./badge.classes"
+
+export type BadgeClasses = typeof badgeClasses
+
+export type QdsBadgeBasicSize = "sm" | "md" | "lg"
+export type QdsBadgeExtraSize = "xs" | QdsBadgeBasicSize | "xl"
+export type QdsBadgeExtendedSize = "xxs" | QdsBadgeExtraSize
+
+export type QdsBadgeSemanticEmphasis =
+  | "neutral"
+  | "brand"
+  | "info"
+  | "success"
+  | "warning"
+  | "danger"
+
+export type QdsBadgeCategoryEmphasis =
+  | "blue"
+  | "cyan"
+  | "green"
+  | "kiwi"
+  | "magenta"
+  | "orange"
+  | "purple"
+  | "red"
+  | "teal"
+  | "yellow"
+
+export interface QdsBaseBadgeProps {
+  /**
+   * The badge disabled state.
+   */
+  disabled?: boolean
+}

packages/common/qds-core/src/badge/icon-badge.api.ts

@@ -0,0 +1,42 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {booleanDataAttr} from "@qualcomm-ui/utils/attributes"
+import type {PropNormalizer} from "@qualcomm-ui/utils/machine"
+
+import {badgeClasses} from "./badge.classes"
+import type {
+  QdsIconBadgeApi,
+  QdsIconBadgeIconBindings,
+  QdsIconBadgeProps,
+  QdsIconBadgeRootBindings,
+} from "./icon-badge.types"
+
+export function createQdsIconBadgeApi(
+  props: QdsIconBadgeProps,
+  normalize: PropNormalizer,
+): QdsIconBadgeApi {
+  const size = props.size || "md"
+  return {
+    getIconBindings(): QdsIconBadgeIconBindings {
+      return normalize.element({
+        className: badgeClasses.icon,
+        "data-part": "icon",
+        "data-scope": "icon-badge",
+        "data-size": size,
+      })
+    },
+    getRootBindings(): QdsIconBadgeRootBindings {
+      return normalize.element({
+        className: badgeClasses.root,
+        "data-disabled": booleanDataAttr(props.disabled),
+        "data-emphasis": props.emphasis || "neutral",
+        "data-overflow": booleanDataAttr(false),
+        "data-part": "root",
+        "data-scope": "icon-badge",
+        "data-size": size,
+        "data-variant": props.variant || "default",
+      })
+    },
+  }
+}

packages/common/qds-core/src/badge/icon-badge.types.ts

@@ -0,0 +1,56 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import type {BooleanDataAttr} from "@qualcomm-ui/utils/attributes"
+
+import type {
+  BadgeClasses,
+  QdsBadgeCategoryEmphasis,
+  QdsBadgeExtendedSize,
+  QdsBadgeSemanticEmphasis,
+  QdsBaseBadgeProps,
+} from "./badge.types"
+
+export type QdsIconBadgeVariant = "default" | "subtle"
+
+export interface QdsIconBadgeProps extends QdsBaseBadgeProps {
+  /**
+   * Governs the color of the icon badge.
+   * @default 'neutral'
+   */
+  emphasis?: QdsBadgeSemanticEmphasis | QdsBadgeCategoryEmphasis
+
+  /**
+   * Governs the size of the badge.
+   * @default 'md'
+   */
+  size?: QdsBadgeExtendedSize
+
+  /**
+   * Governs the style of the icon badge.
+   * @default 'default'
+   */
+  variant?: QdsIconBadgeVariant
+}
+
+export interface QdsIconBadgeRootBindings {
+  className: BadgeClasses["root"]
+  "data-disabled": BooleanDataAttr
+  "data-emphasis": QdsBadgeSemanticEmphasis | QdsBadgeCategoryEmphasis
+  "data-part": "root"
+  "data-scope": "icon-badge"
+  "data-size": QdsBadgeExtendedSize
+  "data-variant": QdsIconBadgeVariant
+}
+
+export interface QdsIconBadgeIconBindings {
+  className: BadgeClasses["icon"]
+  "data-part": "icon"
+  "data-scope": "icon-badge"
+  "data-size": QdsBadgeExtendedSize
+}
+
+export interface QdsIconBadgeApi {
+  getIconBindings(): QdsIconBadgeIconBindings
+  getRootBindings(): QdsIconBadgeRootBindings
+}

packages/common/qds-core/src/badge/index.ts

@@ -0,0 +1,10 @@
+export type * from "./badge.types"
+export * from "./text-badge.api"
+export type * from "./text-badge.types"
+export * from "./number-badge.api"
+export type * from "./number-badge.types"
+export * from "./icon-badge.api"
+export type * from "./icon-badge.types"
+export * from "./status-badge.api"
+export type * from "./status-badge.types"
+export * from "./badge.classes"

packages/common/qds-core/src/badge/number-badge.api.ts

@@ -0,0 +1,41 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+import {booleanDataAttr} from "@qualcomm-ui/utils/attributes"
+import type {PropNormalizer} from "@qualcomm-ui/utils/machine"
+
+import {badgeClasses} from "./badge.classes"
+import type {
+  QdsNumberBadgeApi,
+  QdsNumberBadgeProps,
+  QdsNumberBadgeRootBindings,
+} from "./number-badge.types"
+
+export function createQdsNumberBadgeApi(
+  props: QdsNumberBadgeProps,
+  normalize: PropNormalizer,
+): QdsNumberBadgeApi {
+  let overflow = false
+  let displayValue: number | string | null = null
+
+  if (props.value != null) {
+    const max = props.max ?? 99
+    overflow = props.value > max
+    displayValue = overflow ? `${max}+` : props.value
+  }
+
+  return {
+    displayValue,
+    getRootBindings(): QdsNumberBadgeRootBindings {
+      return normalize.element({
+        className: badgeClasses.root,
+        "data-disabled": booleanDataAttr(props.disabled),
+        "data-emphasis": props.emphasis || "neutral",
+        "data-overflow": booleanDataAttr(overflow),
+        "data-part": "root",
+        "data-scope": "number-badge",
+        "data-size": props.size || "md",
+      })
+    },
+  }
+}