@fluidattacks/design 8.3.0 → 8.4.0

package/dist/components/modal/columns-modal/index.js

@@ -1,42 +1,43 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
 import { useRef as k, useState as j, useCallback as m } from "react";
 import { createPortal as w } from "react-dom";
 import { useTheme as H } from "styled-components";
-import { ModalWrapper as S, ModalContainer as P } from "../styles.js";
+import { Dialog as S } from "../dialog/index.js";
+import { ModalContainer as D } from "../styles.js";
 import { Button as p } from "../../button/index.js";
 import { Container as c } from "../../container/index.js";
 import { Divider as d } from "../../divider/index.js";
-import { IconButton as T } from "../../icon-button/index.js";
-import { PreviewPanel as z } from "./preview-panel/index.js";
-import { SearchPanel as B } from "./search-panel/index.js";
-import { Heading as D } from "../../typography/heading/index.js";
+import { IconButton as P } from "../../icon-button/index.js";
+import { PreviewPanel as T } from "./preview-panel/index.js";
+import { SearchPanel as z } from "./search-panel/index.js";
+import { Heading as B } from "../../typography/heading/index.js";
 import "../../typography/span/index.js";
 import "../../typography/text/index.js";
-const N = ({
+const U = ({
   _containerId: h = "portals",
   title: y,
   modalRef: e,
   variant: f
 }) => {
   const a = H(), u = k(null), [o, g] = j(void 0), C = m(
-    (t) => {
-      const { checked: n, value: i } = t.target, x = e.columns.map((l) => l.name === i ? (l.toggleVisibility?.(n), { ...l, visible: n }) : l);
+    (i) => {
+      const { checked: n, value: r } = i.target, x = e.columns.map((s) => s.name === r ? (s.toggleVisibility?.(n), { ...s, visible: n }) : s);
       e.setColumns(x);
     },
     [e]
   ), b = m(
-    (t) => {
-      const n = e.columns.map((i) => i.id === t ? (i.toggleVisibility?.(!1), { ...i, visible: !1 }) : i);
+    (i) => {
+      const n = e.columns.map((r) => r.id === i ? (r.toggleVisibility?.(!1), { ...r, visible: !1 }) : r);
       e.setColumns(n);
     },
     [e]
   ), v = m(() => {
-    const t = u.current?.scrollHeight;
-    o !== t && g(t);
+    const i = u.current?.scrollHeight;
+    o !== i && g(i);
   }, [o]);
   return e.isOpen ? w(
-    /* @__PURE__ */ r(S, { "aria-label": e.name, "aria-modal": "true", children: /* @__PURE__ */ s(P, { $size: "md", flexDirection: "column", children: [
-      /* @__PURE__ */ s(
+    /* @__PURE__ */ t(S, { label: e.name, children: /* @__PURE__ */ l(D, { $size: "md", flexDirection: "column", children: [
+      /* @__PURE__ */ l(
         c,
         {
           display: "flex",
@@ -44,9 +45,9 @@ const N = ({
           px: 1.25,
           py: 1.25,
           children: [
-            /* @__PURE__ */ r(D, { size: "sm", children: y }),
-            /* @__PURE__ */ r(
-              T,
+            /* @__PURE__ */ t(B, { size: "sm", children: y }),
+            /* @__PURE__ */ t(
+              P,
               {
                 icon: "close",
                 iconColor: a.palette.gray[400],
@@ -63,8 +64,8 @@ const N = ({
           ]
         }
       ),
-      /* @__PURE__ */ r(d, { mb: 0, mt: 0 }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ t(d, { mb: 0, mt: 0 }),
+      /* @__PURE__ */ l(
         c,
         {
           display: "flex",
@@ -75,8 +76,8 @@ const N = ({
           scroll: "y",
           width: "100%",
           children: [
-            /* @__PURE__ */ r(
-              B,
+            /* @__PURE__ */ t(
+              z,
               {
                 columns: e.columns,
                 formId: "columns-visibility",
@@ -84,15 +85,15 @@ const N = ({
                 variant: f
               }
             ),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ t(
               c,
               {
                 borderLeft: `2px solid ${a.palette.gray[100]}`,
                 height: o ? `${o}px` : "auto"
               }
             ),
-            /* @__PURE__ */ r(
-              z,
+            /* @__PURE__ */ t(
+              T,
               {
                 description: "Click and drag to reorder the columns",
                 items: e.columns,
@@ -104,8 +105,8 @@ const N = ({
           ]
         }
       ),
-      /* @__PURE__ */ r(d, { mb: 0, mt: 0 }),
-      /* @__PURE__ */ s(
+      /* @__PURE__ */ t(d, { mb: 0, mt: 0 }),
+      /* @__PURE__ */ l(
         c,
         {
           display: "flex",
@@ -113,7 +114,7 @@ const N = ({
           px: 1.25,
           py: 1.25,
           children: [
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ t(
               p,
               {
                 disabled: !e.hasChanged,
@@ -126,7 +127,7 @@ const N = ({
                 children: "Reset to default"
               }
             ),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ t(
               p,
               {
                 id: "columns-modal-submit",
@@ -141,8 +142,8 @@ const N = ({
       )
     ] }) }),
     document.getElementById(h) ?? document.body
-  ) : /* @__PURE__ */ r("div", {});
+  ) : /* @__PURE__ */ t("div", {});
 };
 export {
-  N as ColumnsModal
+  U as ColumnsModal
 };

package/dist/components/modal/dialog/index.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+import { IDialogProps } from '../types';
+declare const Dialog: ({ children, id, label, }: Readonly<PropsWithChildren<IDialogProps>>) => JSX.Element;
+export { Dialog };

package/dist/components/modal/dialog/index.js

@@ -0,0 +1,32 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useRef as f, useState as c } from "react";
+import { trapTabKey as o } from "./utils.js";
+import { ModalWrapper as p } from "../styles.js";
+import { useMountEffect as s } from "../../../hooks/use-mount-effect.js";
+const w = ({
+  children: n = void 0,
+  id: a = void 0,
+  label: i
+}) => {
+  const r = f(null), [t] = c(() => document.activeElement);
+  return s(() => {
+    const e = r.current;
+    return e?.contains(document.activeElement) !== !0 && e?.focus(), e?.addEventListener("keydown", o), () => {
+      e?.removeEventListener("keydown", o), t instanceof HTMLElement && t.focus();
+    };
+  }), /* @__PURE__ */ m(
+    p,
+    {
+      "aria-label": i,
+      "aria-modal": "true",
+      id: a,
+      ref: r,
+      role: "dialog",
+      tabIndex: -1,
+      children: n
+    }
+  );
+};
+export {
+  w as Dialog
+};

package/dist/components/modal/dialog/utils.d.ts

@@ -0,0 +1,2 @@
+declare const trapTabKey: (event: Readonly<KeyboardEvent>) => void;
+export { trapTabKey };

package/dist/components/modal/dialog/utils.js

@@ -0,0 +1,26 @@
+const s = [
+  "a[href]",
+  "area[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "iframe",
+  "[contenteditable='true']",
+  "[tabindex]:not([tabindex='-1'])"
+].join(", "), c = (t) => Array.from(t.querySelectorAll(s)), d = (t) => {
+  const { currentTarget: n } = t;
+  if (t.key !== "Tab" || !(n instanceof HTMLElement)) return;
+  const e = c(n);
+  if (e.length === 0) {
+    t.preventDefault();
+    return;
+  }
+  const a = e.findIndex(
+    (r) => r === document.activeElement
+  ), o = t.shiftKey && a <= 0, i = !t.shiftKey && a === e.length - 1;
+  (o || i) && (t.preventDefault(), e[o ? e.length - 1 : 0].focus());
+};
+export {
+  d as trapTabKey
+};

package/dist/components/modal/index.js

@@ -1,26 +1,27 @@
-import { jsx as i, jsxs as v } from "react/jsx-runtime";
+import { jsx as r, jsxs as v } from "react/jsx-runtime";
 import o from "../../_virtual/lodash.js";
 import { useState as E, useRef as y, useEffect as F } from "react";
 import { createPortal as $ } from "react-dom";
 import { useTheme as z } from "styled-components";
-import { ModalFooter as k } from "./footer/index.js";
-import { Header as A } from "./header/index.js";
-import { ModalConfirm as mr } from "./modal-confirm/index.js";
-import { ModalWrapper as I, ModalContainer as w, ModalContent as B, ImageContainer as D } from "./styles.js";
+import { Dialog as k } from "./dialog/index.js";
+import { ModalFooter as A } from "./footer/index.js";
+import { Header as D } from "./header/index.js";
+import { ModalConfirm as si } from "./modal-confirm/index.js";
+import { ModalContainer as I, ModalContent as w, ImageContainer as B } from "./styles.js";
 import { CloudImage as N } from "../cloud-image/index.js";
 import { Container as P } from "../container/index.js";
-import { Tabs as W } from "../tabs/index.js";
+import { Tabs as _ } from "../tabs/index.js";
 import "../typography/heading/index.js";
 import "../typography/span/index.js";
-import { Text as _ } from "../typography/text/index.js";
-import { ColumnsModal as ar } from "./columns-modal/index.js";
-const er = ({
+import { Text as q } from "../typography/text/index.js";
+import { ColumnsModal as ai } from "./columns-modal/index.js";
+const oi = ({
   _portal: b = !0,
   alert: C,
   cancelButton: n = void 0,
   children: l = void 0,
   confirmButton: p = void 0,
-  content: r = void 0,
+  content: i = void 0,
   description: M = void 0,
   dismissable: O = !0,
   modalRef: e,
@@ -31,84 +32,76 @@ const er = ({
   size: H,
   id: c = "modal-container"
 }) => {
-  const f = z(), [u, g] = E(void 0), a = y(null), d = y(!1), m = Array.isArray(t) && t.length > 0, S = n ?? p;
+  const f = z(), [g, u] = E(void 0), d = y(null), a = y(!1), m = Array.isArray(t) && t.length > 0, S = n ?? p;
   F(() => {
-    if (m && !d.current && a.current) {
-      const x = a.current.getBoundingClientRect().height;
-      x > 50 && (g(x), d.current = !0);
+    if (m && !a.current && d.current) {
+      const x = d.current.getBoundingClientRect().height;
+      x > 50 && (u(x), a.current = !0);
     }
-    e.isOpen || (g(void 0), d.current = !1);
+    e.isOpen || (u(void 0), a.current = !1);
   }, [m, e.isOpen]);
-  const h = /* @__PURE__ */ i(
+  const h = /* @__PURE__ */ r(k, { id: "modal-wrapper", label: e.name, children: /* @__PURE__ */ v(
     I,
     {
-      "aria-label": e.name,
-      "aria-modal": "true",
-      id: "modal-wrapper",
-      children: /* @__PURE__ */ v(
-        w,
-        {
-          $size: H,
-          "data-testid": c,
-          flexDirection: "column",
-          id: c,
-          ref: m ? a : void 0,
-          style: m && u ? { height: u } : void 0,
-          children: [
-            !o.isEmpty(s) && !o.isNil(s) && /* @__PURE__ */ i(
-              A,
-              {
-                description: M,
-                dismissable: O,
-                modalRef: e,
-                onClose: j,
-                otherActions: T,
-                title: s
-              }
-            ),
-            t && /* @__PURE__ */ i(
-              P,
-              {
-                borderTop: `1px solid ${f.palette.gray[300]}`,
-                display: "block",
-                mb: 1.25,
-                position: "sticky",
-                children: /* @__PURE__ */ i(W, { items: t })
-              }
-            ),
-            (o.isObject(r) || l) && /* @__PURE__ */ v(
-              B,
-              {
-                style: S ? { borderBottom: `1px solid ${f.palette.gray[200]}` } : void 0,
-                children: [
-                  l,
-                  o.isObject(r) && o.isString(r.imageSrc) && /* @__PURE__ */ i(D, { $framed: r.imageFramed, children: /* @__PURE__ */ i(N, { alt: "modal-img", publicId: r.imageSrc }) }),
-                  o.isObject(r) && o.isString(r.imageText) && /* @__PURE__ */ i(_, { size: "md", children: r.imageText })
-                ]
-              }
-            ),
-            /* @__PURE__ */ i(
-              k,
-              {
-                alert: C,
-                cancelButton: n,
-                confirmButton: p,
-                modalRef: e
-              }
-            )
-          ]
-        }
-      )
+      $size: H,
+      "data-testid": c,
+      flexDirection: "column",
+      id: c,
+      ref: m ? d : void 0,
+      style: m && g ? { height: g } : void 0,
+      children: [
+        !o.isEmpty(s) && !o.isNil(s) && /* @__PURE__ */ r(
+          D,
+          {
+            description: M,
+            dismissable: O,
+            modalRef: e,
+            onClose: j,
+            otherActions: T,
+            title: s
+          }
+        ),
+        t && /* @__PURE__ */ r(
+          P,
+          {
+            borderTop: `1px solid ${f.palette.gray[300]}`,
+            display: "block",
+            mb: 1.25,
+            position: "sticky",
+            children: /* @__PURE__ */ r(_, { items: t })
+          }
+        ),
+        (o.isObject(i) || l) && /* @__PURE__ */ v(
+          w,
+          {
+            style: S ? { borderBottom: `1px solid ${f.palette.gray[200]}` } : void 0,
+            children: [
+              l,
+              o.isObject(i) && o.isString(i.imageSrc) && /* @__PURE__ */ r(B, { $framed: i.imageFramed, children: /* @__PURE__ */ r(N, { alt: "modal-img", publicId: i.imageSrc }) }),
+              o.isObject(i) && o.isString(i.imageText) && /* @__PURE__ */ r(q, { size: "md", children: i.imageText })
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          A,
+          {
+            alert: C,
+            cancelButton: n,
+            confirmButton: p,
+            modalRef: e
+          }
+        )
+      ]
     }
-  );
+  ) });
   return b && e.isOpen ? $(
     h,
     document.getElementById("portals") ?? document.body
   ) : e.isOpen ? h : null;
 };
 export {
-  ar as ColumnsModal,
-  er as Modal,
-  mr as ModalConfirm,
-  k as ModalFooter
+  ai as ColumnsModal,
+  oi as Modal,
+  si as ModalConfirm,
+  A as ModalFooter
 };

package/dist/components/modal/types.d.ts

@@ -25,6 +25,16 @@ interface IModalContent {
     imageFramed?: boolean;
     imageText?: string;
 }
+/**
+ * Modal dialog props.
+ * @interface IDialogProps
+ * @property { string } [id] - The id of the dialog element.
+ * @property { string } label - The accessible name announced when the dialog takes focus.
+ */
+interface IDialogProps {
+    id?: string;
+    label: string;
+}
 /**
  * Modal header component props.
  * @interface IModalHeaderProps
@@ -92,4 +102,4 @@ interface IModalConfirmProps {
     txtCancel?: string;
     txtConfirm?: React.ReactNode | string;
 }
-export type { IModalProps, IModalContent, IModalConfirmProps, IModalFooterProps, IModalHeaderProps, TSize, };
+export type { IDialogProps, IModalProps, IModalContent, IModalConfirmProps, IModalFooterProps, IModalHeaderProps, TSize, };

package/dist/components/table/table-column-toggle/index.js

@@ -5,6 +5,7 @@ import { Button as f } from "../../button/index.js";
 import "../../../_virtual/lodash.js";
 import "react-dom";
 import "styled-components";
+import { useColumnsModal as b } from "../../../hooks/use-columns-modal.js";
 import "../../container/index.js";
 import "../../icon-button/index.js";
 import "../../typography/heading/index.js";
@@ -14,8 +15,7 @@ import "../../cloud-image/index.js";
 import "react-router";
 import "../../notification-sign/index.js";
 import "../../icon/index.js";
-import { ColumnsModal as b } from "../../modal/columns-modal/index.js";
-import { useColumnsModal as C } from "../../../hooks/use-columns-modal.js";
+import { ColumnsModal as C } from "../../modal/columns-modal/index.js";
 const G = (s) => {
   const { table: t } = s, { meta: m } = t.options, [, n] = t.getHeaderGroups(), a = t.getVisibleLeafColumns().filter((o) => o.id !== "selection").length, i = l(
     () => t.getAllLeafColumns().filter((o) => o.id !== "selection"),
@@ -27,7 +27,7 @@ const G = (s) => {
     name: typeof o.columnDef.header == "string" ? o.columnDef.header : o.columnDef.id ?? "",
     toggleVisibility: o.toggleVisibility,
     visible: o.getIsVisible()
-  })), [i]), e = C({
+  })), [i]), e = b({
     columnOrder: m?.defaultColumnOrder ?? [],
     items: d,
     name: "table-column-management",
@@ -48,7 +48,7 @@ const G = (s) => {
       }
     ),
     /* @__PURE__ */ r(
-      b,
+      C,
       {
         modalRef: e,
         title: "Manage columns",

package/dist/components/tag/index.d.ts

@@ -1,4 +1,4 @@
 import { ITagProps, TTagVariant } from './types';
-declare const Tag: ({ disabled, dot, icon, iconColor, iconType, id, filterId, filterValues, fontSize, href, linkLabel, onBodyClick, onClose, priority, selected, tagTitle, tagLabel, truncate, variant, }: Readonly<ITagProps>) => JSX.Element;
+declare const Tag: ({ disabled, dot, icon, iconColor, iconType, id, filterId, filterValues, fontSize, fullWidth, href, linkLabel, onBodyClick, onClose, priority, selected, tagTitle, tagLabel, truncate, variant, }: Readonly<ITagProps>) => JSX.Element;
 export type { ITagProps, TTagVariant };
 export { Tag };

package/dist/components/tag/index.js

@@ -1,40 +1,41 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { l as b } from "../../_virtual/lodash.js";
-import { StyledTag as k, StyledTagContent as E, StyledDot as j } from "./styles.js";
-import { Icon as K } from "../icon/index.js";
-import { IconButton as P } from "../icon-button/index.js";
+import { l as k } from "../../_virtual/lodash.js";
+import { StyledTag as E, StyledTagContent as j, StyledDot as K } from "./styles.js";
+import { Icon as P } from "../icon/index.js";
+import { IconButton as W } from "../icon-button/index.js";
 import { Link as C } from "../link/index.js";
 import "../typography/heading/index.js";
-import { Span as W } from "../typography/span/index.js";
+import { Span as q } from "../typography/span/index.js";
 import "../typography/text/index.js";
-const R = ({
+const U = ({
   disabled: f,
   dot: h = !1,
-  icon: c,
+  icon: d,
   iconColor: u = "inherit",
   iconType: v = "fa-light",
   id: g = "close-tag",
   filterId: x = "",
-  filterValues: d = "",
+  filterValues: c = "",
   fontSize: y,
+  fullWidth: S = !1,
   href: r,
-  linkLabel: S,
+  linkLabel: $,
   onBodyClick: i,
   onClose: n,
-  priority: $ = "default",
+  priority: T = "default",
   selected: a,
   tagTitle: p = "",
-  tagLabel: s,
-  truncate: T = !0,
-  variant: w = "default"
+  tagLabel: l,
+  truncate: w = !0,
+  variant: z = "default"
 }) => {
-  const z = s.length > 25 && T && b.isEmpty(p + d), D = `${s.slice(0, 25)}...`, I = (t) => {
+  const D = l.length > 25 && w && k.isEmpty(p + c), I = `${l.slice(0, 25)}...`, N = (t) => {
     t.target === t.currentTarget && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), i?.());
-  }, N = (t) => {
+  }, b = (t) => {
     t.stopPropagation(), n?.();
-  }, l = i !== void 0, m = l && typeof a == "boolean";
+  }, s = i !== void 0, m = s && typeof a == "boolean";
   return /* @__PURE__ */ e(
-    W,
+    q,
     {
       className: "gap-0.5",
       color: "inherit",
@@ -42,42 +43,43 @@ const R = ({
       size: "md",
       children: [
         /* @__PURE__ */ e(
-          k,
+          E,
           {
             $fontSize: y,
-            $interactive: l,
+            $fullWidth: S,
+            $interactive: s,
             $selectable: m,
             $selected: a === !0,
-            $variant: w,
-            className: $,
+            $variant: z,
+            className: T,
             "data-testid": x,
-            ...l && {
+            ...s && {
               ...m ? { "aria-pressed": a } : {},
               onClick: i,
-              onKeyDown: I,
+              onKeyDown: N,
               role: "button",
               tabIndex: 0
             },
             children: [
-              /* @__PURE__ */ e(E, { children: [
-                c ? /* @__PURE__ */ o(
-                  K,
+              /* @__PURE__ */ e(j, { children: [
+                d ? /* @__PURE__ */ o(
+                  P,
                   {
-                    icon: c,
+                    icon: d,
                     iconColor: u,
                     iconSize: "sm",
                     iconType: v
                   }
                 ) : void 0,
-                h ? /* @__PURE__ */ o(j, { "data-testid": "tag-dot" }) : void 0,
+                h ? /* @__PURE__ */ o(K, { "data-testid": "tag-dot" }) : void 0,
                 /* @__PURE__ */ e("span", { className: "w-full", children: [
                   /* @__PURE__ */ o("strong", { children: p }),
-                  /* @__PURE__ */ o("span", { children: z ? D : s }),
-                  /* @__PURE__ */ o("strong", { className: "w-full", children: d })
+                  /* @__PURE__ */ o("span", { children: D ? I : l }),
+                  /* @__PURE__ */ o("strong", { className: "w-full", children: c })
                 ] })
               ] }),
               n ? /* @__PURE__ */ o(
-                P,
+                W,
                 {
                   disabled: f,
                   icon: "xmark",
@@ -85,7 +87,7 @@ const R = ({
                   iconSize: "xs",
                   iconType: "fa-light",
                   id: g,
-                  onClick: i !== void 0 ? N : n,
+                  onClick: i !== void 0 ? b : n,
                   px: 0.125,
                   py: 0.125,
                   variant: "ghost"
@@ -94,11 +96,11 @@ const R = ({
             ]
           }
         ),
-        r === void 0 ? void 0 : /* @__PURE__ */ o(C, { href: r, children: S })
+        r === void 0 ? void 0 : /* @__PURE__ */ o(C, { href: r, children: $ })
       ]
     }
   );
 };
 export {
-  R as Tag
+  U as Tag
 };

package/dist/components/tag/styles.d.ts

@@ -1,6 +1,7 @@
 import { TTagVariant } from './types';
 interface IStyledTag {
     $fontSize?: string;
+    $fullWidth?: boolean;
     $interactive?: boolean;
     $selectable?: boolean;
     $selected?: boolean;

package/dist/components/tag/styles.js

@@ -1,11 +1,24 @@
 import { styled as a } from "styled-components";
 import { variantBuilder as i } from "../@core/variants/utils.js";
-const { getVariant: p } = i(
+const { getVariant: g } = i(
   (o) => ({
     complementary: `
       background-color: ${o.palette.complementary[300]};
       color: ${o.palette.white};
     `,
+    cwe: `
+      --tag-padding-y: calc(${o.spacing[0.125]} - 1px);
+      --tag-padding-x: ${o.spacing[0.25]};
+
+      background-color: ${o.palette.gray[50]};
+      border: 1px solid ${o.palette.gray[300]};
+      border-radius: ${o.spacing[0.5]};
+      color: ${o.palette.gray[600]};
+
+      a:hover & {
+        text-decoration: underline;
+      }
+    `,
     default: `
       background-color: ${o.palette.gray[100]};
       color: ${o.palette.gray[600]};
@@ -47,6 +60,21 @@ const { getVariant: p } = i(
         color: ${o.palette.info[50]};
       }
     `,
+    overflow: `
+      --tag-padding-y: calc(${o.spacing[0.125]} - 1px);
+      --tag-padding-x: ${o.spacing[0.25]};
+
+      background-color: ${o.palette.gray[300]};
+      border: 1px solid ${o.palette.gray[300]};
+      border-radius: ${o.spacing[0.5]};
+      color: ${o.palette.gray[600]};
+
+      &[role="button"]:hover {
+        background-color: ${o.palette.gray[500]};
+        border-color: ${o.palette.gray[500]};
+        color: ${o.palette.gray[25]};
+      }
+    `,
     reachable: `
       background-color: ${o.palette.gray[50]};
       color: ${o.palette.gray[800]};
@@ -106,14 +134,15 @@ const { getVariant: p } = i(
   &:hover {
     background-color: ${r ? o.palette.gray[800] : o.palette.gray[100]};
   }
-`, d = a.span`
+`, $ = a.span`
   ${({
   theme: o,
   $fontSize: r = o.typography.text.sm,
+  $fullWidth: t = !1,
   $variant: l,
-  $interactive: c = !1,
-  $selectable: t = !1,
-  $selected: n = !1
+  $interactive: n = !1,
+  $selectable: c = !1,
+  $selected: p = !1
 }) => `
     align-items: center;
     border-radius: ${o.spacing[l === "technique" ? 1 : 0.25]};
@@ -127,8 +156,8 @@ const { getVariant: p } = i(
     line-height: 18px;
     padding: var(--tag-padding-y) var(--tag-padding-x);
     white-space: nowrap;
-    width: max-content;
-    ${c && !t ? "cursor: pointer;" : ""}
+    width: ${t ? "100%" : "max-content"};
+    ${n && !c ? "cursor: pointer;" : ""}
 
     ~ a {
       font-size: ${o.typography.text.xs};
@@ -148,17 +177,17 @@ const { getVariant: p } = i(
       }
     }
 
-    ${p(o, l)}
-    ${t ? e(o, n) : ""}
+    ${g(o, l)}
+    ${c ? e(o, p) : ""}
   `}
-`, $ = a.span`
+`, u = a.span`
   ${({ theme: o }) => `
     align-items: center;
     display: inline-flex;
     gap: ${o.spacing[0.25]};
     min-width: 0;
   `}
-`, u = a.span`
+`, y = a.span`
   background-color: currentColor;
   border-radius: 50%;
   flex-shrink: 0;
@@ -166,7 +195,7 @@ const { getVariant: p } = i(
   width: 6px;
 `;
 export {
-  u as StyledDot,
-  d as StyledTag,
-  $ as StyledTagContent
+  y as StyledDot,
+  $ as StyledTag,
+  u as StyledTagContent
 };

package/dist/components/tag/types.d.ts

@@ -1,5 +1,5 @@
 import { IIconModifiable } from '../@core';
-type TTagVariant = "complementary" | "default" | "error" | "inactive" | "inactiveOutline" | "info" | "reachable" | "remediation" | "role" | "success" | "technique" | "warning";
+type TTagVariant = "complementary" | "cwe" | "default" | "error" | "inactive" | "inactiveOutline" | "info" | "overflow" | "reachable" | "remediation" | "role" | "success" | "technique" | "warning";
 type TTagPriority = "default" | "high" | "low" | "medium";
 /**
  * Tag component props.
@@ -10,6 +10,8 @@ type TTagPriority = "default" | "high" | "low" | "medium";
  * @property { boolean } [dot] - Whether to render a status dot before the label.
  * @property { string } [filterValues] - The filter values for the tag.
  * @property { string } [fontSize] - The font size for the tag.
+ * @property { boolean } [fullWidth] - Whether the tag fills the width of its
+ *   container instead of fitting its content.
  * @property { string } [href] - The href for the tag.
  * @property { string } [linkLabel] - The link label for the tag.
  * @property { Function } [onClose] - Function handler for close button click.
@@ -29,6 +31,7 @@ interface ITagProps extends Partial<Pick<IIconModifiable, "icon" | "iconColor" |
     filterValues?: string;
     filterId?: string;
     fontSize?: string;
+    fullWidth?: boolean;
     href?: string;
     linkLabel?: string;
     onBodyClick?: () => void;

package/package.json

@@ -135,5 +135,5 @@
     "./dist/index.js"
   ],
   "typings": "./dist/index.d.ts",
-  "version": "8.3.0"
+  "version": "8.4.0"
 }