@pathscale/ui 1.2.5 → 1.2.7

package/dist/components/tabs/Tabs.js

@@ -1,16 +1,16 @@
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
 import "./Tabs.css";
-import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
-import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
-import * as __WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__ from "./Tabs.classes.js";
-var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), _tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div><span>"), _tmpl$3 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<button>"), _tmpl$4 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span>");
-const TabsContext = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createContext)();
+import { createContext, createEffect, createMemo, createSignal, createUniqueId, onCleanup, onMount, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import { CLASSES } from "./Tabs.classes.js";
+var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<div><span>"), _tmpl$3 = /*#__PURE__*/ template("<button>"), _tmpl$4 = /*#__PURE__*/ template("<span>");
+const TabsContext = createContext();
 const invokeEventHandler = (handler, event)=>{
     if ("function" == typeof handler) return void handler(event);
     if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
 };
 const TabsRoot = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const [local, others] = splitProps(props, [
         "children",
         "class",
         "orientation",
@@ -19,9 +19,9 @@ const TabsRoot = (props)=>{
         "defaultSelectedKey",
         "onSelectionChange"
     ]);
-    const baseId = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createUniqueId)();
-    const [internalSelectedKey, setInternalSelectedKey] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(local.defaultSelectedKey);
-    const [tabs, setTabs] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)([]);
+    const baseId = createUniqueId();
+    const [internalSelectedKey, setInternalSelectedKey] = createSignal(local.defaultSelectedKey);
+    const [tabs, setTabs] = createSignal([]);
     const isControlled = ()=>void 0 !== local.selectedKey;
     const selectedKey = ()=>isControlled() ? local.selectedKey : internalSelectedKey();
     const setSelectedKey = (key)=>{
@@ -42,8 +42,8 @@ const TabsRoot = (props)=>{
     };
     const getTabId = (key)=>`${baseId}-tab-${String(key)}`;
     const getPanelId = (key)=>`${baseId}-panel-${String(key)}`;
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.base, "secondary" === local.variant && __WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.variant.secondary, local.class);
-    const context = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>({
+    const classes = ()=>twMerge(CLASSES.base, "secondary" === local.variant && CLASSES.variant.secondary, local.class);
+    const context = createMemo(()=>({
             orientation: local.orientation ?? "horizontal",
             variant: local.variant ?? "primary",
             selectedKey,
@@ -54,13 +54,13 @@ const TabsRoot = (props)=>{
             getTabId,
             getPanelId
         }));
-    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(TabsContext.Provider, {
+    return createComponent(TabsContext.Provider, {
         get value () {
             return context();
         },
         get children () {
             var _el$ = _tmpl$();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
+            spread(_el$, mergeProps(others, ()=>({
                     class: classes()
                 }), {
                 "data-slot": "tabs",
@@ -68,48 +68,48 @@ const TabsRoot = (props)=>{
                     return local.orientation ?? "horizontal";
                 }
             }), false, true);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+            insert(_el$, ()=>local.children);
             return _el$;
         }
     });
 };
 const TabListContainer = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const [local, others] = splitProps(props, [
         "class",
         "children"
     ]);
     return (()=>{
         var _el$2 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.slot.listContainer, local.class)
+        spread(_el$2, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.listContainer, local.class)
             }), {
             "data-slot": "tabs-list-container"
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, ()=>local.children);
+        insert(_el$2, ()=>local.children);
         return _el$2;
     })();
 };
 const TabList = (props)=>{
-    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(TabsContext);
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const ctx = useContext(TabsContext);
+    const [local, others] = splitProps(props, [
         "class",
         "children",
         "ref"
     ]);
-    const [indicatorStyle, setIndicatorStyle] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)({
+    const [indicatorStyle, setIndicatorStyle] = createSignal({
         "--tabs-indicator-x": "0px",
         "--tabs-indicator-y": "0px",
         "--tabs-indicator-width": "0px",
         "--tabs-indicator-height": "0px"
     });
-    const [indicatorVisible, setIndicatorVisible] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
-    const [indicatorReady, setIndicatorReady] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const [indicatorVisible, setIndicatorVisible] = createSignal(false);
+    const [indicatorReady, setIndicatorReady] = createSignal(false);
     let listRef;
     let rafId;
     if (!ctx) return (()=>{
         var _el$3 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$3, others, false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, ()=>local.children);
+        spread(_el$3, others, false, true);
+        insert(_el$3, ()=>local.children);
         return _el$3;
     })();
     const setListRef = (element)=>{
@@ -150,45 +150,45 @@ const TabList = (props)=>{
             measureIndicator();
         });
     };
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+    createEffect(()=>{
         ctx.selectedKey();
         ctx.tabs();
         scheduleMeasure();
     });
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+    createEffect(()=>{
         if (!listRef) return;
         const observer = new ResizeObserver(()=>scheduleMeasure());
         observer.observe(listRef);
         for (const tab of ctx.tabs())observer.observe(tab.ref);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>observer.disconnect());
+        onCleanup(()=>observer.disconnect());
     });
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+    onMount(()=>{
         scheduleMeasure();
         window.addEventListener("resize", scheduleMeasure);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        onCleanup(()=>{
             window.removeEventListener("resize", scheduleMeasure);
             if (void 0 !== rafId) cancelAnimationFrame(rafId);
         });
     });
     return (()=>{
         var _el$4 = _tmpl$2(), _el$5 = _el$4.firstChild;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(setListRef, _el$4);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$4, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        use(setListRef, _el$4);
+        spread(_el$4, mergeProps(others, {
             role: "tablist",
             get ["aria-orientation"] () {
                 return ctx.orientation;
             }
         }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.slot.list, local.class)
+                class: twMerge(CLASSES.slot.list, local.class)
             }), {
             "data-slot": "tabs-list",
             get ["data-orientation"] () {
                 return ctx.orientation;
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$4, ()=>local.children, _el$5);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$5, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(()=>({
-                class: __WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.slot.indicator
+        insert(_el$4, ()=>local.children, _el$5);
+        spread(_el$5, mergeProps(()=>({
+                class: CLASSES.slot.indicator
             }), {
             "data-slot": "tabs-indicator",
             get ["data-ready"] () {
@@ -205,8 +205,8 @@ const TabList = (props)=>{
     })();
 };
 const Tab = (props)=>{
-    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(TabsContext);
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const ctx = useContext(TabsContext);
+    const [local, others] = splitProps(props, [
         "class",
         "children",
         "id",
@@ -217,22 +217,22 @@ const Tab = (props)=>{
     let tabRef;
     if (!ctx) return (()=>{
         var _el$6 = _tmpl$3();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$6, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.slot.tab, local.class)
+        spread(_el$6, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.slot.tab, local.class)
             })), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$6, ()=>local.children);
+        insert(_el$6, ()=>local.children);
         return _el$6;
     })();
-    const isSelected = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>ctx.selectedKey() === local.id);
+    const isSelected = createMemo(()=>ctx.selectedKey() === local.id);
     const isDisabled = ()=>Boolean(local.isDisabled);
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onMount)(()=>{
+    onMount(()=>{
         if (tabRef) ctx.registerTab({
             key: local.id,
             ref: tabRef,
             disabled: isDisabled()
         });
     });
-    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+    onCleanup(()=>{
         ctx.unregisterTab(local.id);
     });
     const focusTab = (info)=>{
@@ -277,12 +277,12 @@ const Tab = (props)=>{
         if (isDisabled()) return;
         ctx.setSelectedKey(local.id);
     };
-    const classes = ()=>(0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.slot.tab, local.class);
+    const classes = ()=>twMerge(CLASSES.slot.tab, local.class);
     return (()=>{
         var _el$7 = _tmpl$3();
         var _ref$ = tabRef;
-        "function" == typeof _ref$ ? (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)(_ref$, _el$7) : tabRef = _el$7;
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$7, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        "function" == typeof _ref$ ? use(_ref$, _el$7) : tabRef = _el$7;
+        spread(_el$7, mergeProps(others, {
             get id () {
                 return ctx.getTabId(local.id);
             },
@@ -315,28 +315,28 @@ const Tab = (props)=>{
             onKeyDown: handleKeyDown,
             onClick: handleClick
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$7, ()=>local.children);
+        insert(_el$7, ()=>local.children);
         return _el$7;
     })();
 };
 const TabIndicator = ()=>null;
 const TabPanel = (props)=>{
-    const ctx = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.useContext)(TabsContext);
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const ctx = useContext(TabsContext);
+    const [local, others] = splitProps(props, [
         "class",
         "children",
         "id"
     ]);
     if (!ctx) return (()=>{
         var _el$8 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$8, others, false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$8, ()=>local.children);
+        spread(_el$8, others, false, true);
+        insert(_el$8, ()=>local.children);
         return _el$8;
     })();
     const isSelected = ()=>ctx.selectedKey() === local.id;
     return (()=>{
         var _el$9 = _tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$9, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        spread(_el$9, mergeProps(others, {
             get id () {
                 return ctx.getPanelId(local.id);
             },
@@ -345,7 +345,7 @@ const TabPanel = (props)=>{
                 return ctx.getTabId(local.id);
             }
         }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.slot.panel, local.class)
+                class: twMerge(CLASSES.slot.panel, local.class)
             }), {
             "data-slot": "tabs-panel",
             get ["data-orientation"] () {
@@ -355,20 +355,20 @@ const TabPanel = (props)=>{
                 return !isSelected();
             }
         }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$9, ()=>local.children);
+        insert(_el$9, ()=>local.children);
         return _el$9;
     })();
 };
 const TabSeparator = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+    const [local, others] = splitProps(props, [
         "class"
     ]);
     return (()=>{
         var _el$0 = _tmpl$4();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$0, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+        spread(_el$0, mergeProps(others, {
             "aria-hidden": "true"
         }, ()=>({
-                class: (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(__WEBPACK_EXTERNAL_MODULE__Tabs_classes_js_0e8b893a__.CLASSES.slot.separator, local.class)
+                class: twMerge(CLASSES.slot.separator, local.class)
             }), {
             "data-slot": "tabs-separator"
         }), false, false);

package/dist/components/tabs/index.js

@@ -1,4 +1,2 @@
-import * as __WEBPACK_EXTERNAL_MODULE__Tabs_js_f50f6764__ from "./Tabs.js";
-var __webpack_exports__Tabs = __WEBPACK_EXTERNAL_MODULE__Tabs_js_f50f6764__.Tabs;
-var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Tabs_js_f50f6764__["default"];
-export { __webpack_exports__Tabs as Tabs, __webpack_exports__default as default };
+import external_Tabs_js_default, { Tabs } from "./Tabs.js";
+export { Tabs, external_Tabs_js_default as default };

package/dist/components/tag/Tag.css

@@ -1,121 +1,121 @@
-@layer components {
-  .tag {
-    --tag-optical-offset: 0.031em;
-
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    border-radius: 9999px;
-    font-weight: 500;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
-    transform-origin: center;
-    cursor: pointer;
-    transition:
-      color 100ms ease,
-      transform 100ms ease,
-      opacity 100ms ease,
-      background-color 100ms ease,
-      box-shadow 100ms ease;
-
-    --tag-bg-default: var(--color-default);
-    --tag-fg-default: var(--color-default-foreground);
-    --tag-bg-default-hover: var(--color-default-hover);
-    --tag-bg-surface: var(--color-surface, var(--color-base-200));
-    --tag-fg-surface: var(--color-surface-foreground, var(--color-base-content));
-    --tag-bg-surface-hover: var(--color-surface-hover, var(--color-base-300));
-    --tag-bg-selected: var(--color-accent-soft);
-    --tag-fg-selected: var(--color-accent-soft-foreground);
-    --tag-bg-selected-hover: var(--color-accent-soft-hover);
-    --tag-bg: var(--tag-bg-default);
-    --tag-fg: var(--tag-fg-default);
-    --tag-bg-hover: var(--tag-bg-default-hover);
-
-    background-color: var(--tag-bg);
-    color: var(--tag-fg);
-  }
-
-  .tag__icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    pointer-events: none;
-  }
-
-  .tag__icon > * {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
-
-  .tag:is([data-disabled="true"], [aria-disabled="true"]) {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .tag:is(:focus-visible, [data-focus-visible]) {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
-  }
-
-  .tag:is([data-selected="true"], [aria-selected="true"]) {
-    background-color: var(--tag-bg-selected);
-    color: var(--tag-fg-selected);
-  }
-
-  @media (hover: hover) {
-    .tag:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
-      background-color: var(--tag-bg-hover);
-    }
-
-    .tag:is([data-selected="true"], [aria-selected="true"]):is(:hover, [data-hovered="true"]) {
-      background-color: var(--tag-bg-selected-hover);
-    }
-  }
-
-  .tag--sm {
-    padding-inline: 0.5rem;
-    padding-block: 0.125rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
-  .tag--md {
-    padding-inline: 0.5rem;
-    padding-block: 0.25rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
-  .tag--lg {
-    padding-inline: 0.625rem;
-    padding-block: 0.375rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
-  .tag--default {
-    --tag-bg: var(--tag-bg-default);
-    --tag-fg: var(--tag-fg-default);
-    --tag-bg-hover: var(--tag-bg-default-hover);
-  }
-
-  .tag--surface {
-    --tag-bg: var(--tag-bg-surface);
-    --tag-fg: var(--tag-fg-surface);
-    --tag-bg-hover: var(--tag-bg-surface-hover);
-  }
-
-  .tag__remove-button {
-    width: 0.75rem;
-    height: 0.75rem;
-    color: inherit;
-  }
-
-  .tag__remove-button > * {
-    width: inherit;
-    height: inherit;
-    pointer-events: none;
-  }
-}
+@layer components {
+  .tag {
+    --tag-optical-offset: 0.031em;
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    border-radius: 9999px;
+    font-weight: 500;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transform-origin: center;
+    cursor: pointer;
+    transition:
+      color 100ms ease,
+      transform 100ms ease,
+      opacity 100ms ease,
+      background-color 100ms ease,
+      box-shadow 100ms ease;
+
+    --tag-bg-default: var(--color-default);
+    --tag-fg-default: var(--color-default-foreground);
+    --tag-bg-default-hover: var(--color-default-hover);
+    --tag-bg-surface: var(--color-surface, var(--color-base-200));
+    --tag-fg-surface: var(--color-surface-foreground, var(--color-base-content));
+    --tag-bg-surface-hover: var(--color-surface-hover, var(--color-base-300));
+    --tag-bg-selected: var(--color-accent-soft);
+    --tag-fg-selected: var(--color-accent-soft-foreground);
+    --tag-bg-selected-hover: var(--color-accent-soft-hover);
+    --tag-bg: var(--tag-bg-default);
+    --tag-fg: var(--tag-fg-default);
+    --tag-bg-hover: var(--tag-bg-default-hover);
+
+    background-color: var(--tag-bg);
+    color: var(--tag-fg);
+  }
+
+  .tag__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+
+  .tag__icon > * {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  .tag:is([data-disabled="true"], [aria-disabled="true"]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .tag:is(:focus-visible, [data-focus-visible]) {
+    outline: 2px solid var(--color-accent);
+    outline-offset: 2px;
+  }
+
+  .tag:is([data-selected="true"], [aria-selected="true"]) {
+    background-color: var(--tag-bg-selected);
+    color: var(--tag-fg-selected);
+  }
+
+  @media (hover: hover) {
+    .tag:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
+      background-color: var(--tag-bg-hover);
+    }
+
+    .tag:is([data-selected="true"], [aria-selected="true"]):is(:hover, [data-hovered="true"]) {
+      background-color: var(--tag-bg-selected-hover);
+    }
+  }
+
+  .tag--sm {
+    padding-inline: 0.5rem;
+    padding-block: 0.125rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .tag--md {
+    padding-inline: 0.5rem;
+    padding-block: 0.25rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+  }
+
+  .tag--lg {
+    padding-inline: 0.625rem;
+    padding-block: 0.375rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .tag--default {
+    --tag-bg: var(--tag-bg-default);
+    --tag-fg: var(--tag-fg-default);
+    --tag-bg-hover: var(--tag-bg-default-hover);
+  }
+
+  .tag--surface {
+    --tag-bg: var(--tag-bg-surface);
+    --tag-fg: var(--tag-fg-surface);
+    --tag-bg-hover: var(--tag-bg-surface-hover);
+  }
+
+  .tag__remove-button {
+    width: 0.75rem;
+    height: 0.75rem;
+    color: inherit;
+  }
+
+  .tag__remove-button > * {
+    width: inherit;
+    height: inherit;
+    pointer-events: none;
+  }
+}