fix: safari icons

packages/ui/src/components/basic-tool.css

@@ -14,7 +14,7 @@
     gap: 20px;
   }
 
-  [data-slot="basic-tool-tool-icon"] {
+  [data-slot="icon-svg"] {
     flex-shrink: 0;
   }
 

packages/ui/src/components/basic-tool.tsx

@@ -30,7 +30,7 @@ export function BasicTool(props: BasicToolProps) {
       <Collapsible.Trigger>
         <div data-component="tool-trigger">
           <div data-slot="basic-tool-tool-trigger-content">
-            <Icon name={props.icon} size="small" data-slot="basic-tool-tool-icon" />
+            <Icon name={props.icon} size="small" />
             <div data-slot="basic-tool-tool-info">
               <Switch>
                 <Match when={isTriggerTitle(props.trigger) && props.trigger}>

packages/ui/src/components/button.css

@@ -87,7 +87,7 @@
       cursor: not-allowed;
     }
 
-    [data-slot="button-icon"] {
+    [data-slot="icon-svg"] {
       color: var(--icon-strong-base);
     }
   }

packages/ui/src/components/button.tsx

@@ -25,7 +25,7 @@ export function Button(props: ButtonProps) {
       }}
     >
       <Show when={split.icon}>
-        <Icon data-slot="button-icon" name={split.icon!} size="small" />
+        <Icon name={split.icon!} size="small" />
       </Show>
       {props.children}
     </Kobalte>

packages/ui/src/components/collapsible.tsx

@@ -34,7 +34,7 @@ function CollapsibleContent(props: ComponentProps<typeof Kobalte.Content>) {
 function CollapsibleArrow(props?: ComponentProps<"div">) {
   return (
     <div data-slot="collapsible-arrow" {...(props || {})}>
-      <Icon data-slot="collapsible-arrow-icon" name="chevron-grabber-vertical" size="small" />
+      <Icon name="chevron-grabber-vertical" size="small" />
     </div>
   )
 }

packages/ui/src/components/icon-button.css

@@ -11,7 +11,7 @@
   &[data-variant="primary"] {
     background-color: var(--icon-strong-base);
 
-    [data-slot="icon-button-icon"] {
+    [data-slot="icon-svg"] {
       /* color: var(--icon-weak-base); */
       color: var(--icon-invert-base);
 
@@ -35,7 +35,7 @@
     &:disabled {
       background-color: var(--icon-strong-disabled);
 
-      [data-slot="icon-button-icon"] {
+      [data-slot="icon-svg"] {
         color: var(--icon-invert-base);
       }
     }
@@ -64,7 +64,7 @@
       background-color: var(--button-secondary-base);
     }
 
-    [data-slot="icon-button-icon"] {
+    [data-slot="icon-svg"] {
       color: var(--icon-strong-base);
     }
   }
@@ -73,14 +73,14 @@
     background-color: transparent;
     /* color: var(--icon-base); */
 
-    [data-slot="icon-button-icon"] {
+    [data-slot="icon-svg"] {
       color: var(--icon-base);
     }
 
     &:hover:not(:disabled) {
       background-color: var(--surface-raised-base-hover);
 
-      /* [data-slot="icon-button-icon"] { */
+      /* [data-slot="icon-svg"] { */
       /*   color: var(--icon-hover); */
       /* } */
     }
@@ -89,13 +89,13 @@
     }
     &:active:not(:disabled) {
       background-color: var(--surface-raised-base-active);
-      /* [data-slot="icon-button-icon"] { */
+      /* [data-slot="icon-svg"] { */
       /*   color: var(--icon-active); */
       /* } */
     }
     &:selected:not(:disabled) {
       background-color: var(--surface-raised-base-active);
-      /* [data-slot="icon-button-icon"] { */
+      /* [data-slot="icon-svg"] { */
       /*   color: var(--icon-selected); */
       /* } */
     }
@@ -115,7 +115,7 @@
     /* padding: 0 8px 0 6px; */
     gap: 8px;
 
-    [data-slot="icon-button-icon"] {
+    [data-slot="icon-svg"] {
       height: 16px;
       width: 16px;
     }

packages/ui/src/components/icon-button.tsx

@@ -22,11 +22,7 @@ export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {
         [split.class ?? ""]: !!split.class,
       }}
     >
-      <Icon
-        data-slot="icon-button-icon"
-        name={props.icon}
-        size={split.iconSize ?? (split.size === "large" ? "normal" : "small")}
-      />
+      <Icon name={props.icon} size={split.iconSize ?? (split.size === "large" ? "normal" : "small")} />
     </Kobalte>
   )
 }

packages/ui/src/components/message-part.css

@@ -34,7 +34,7 @@
   align-items: start;
   gap: 8px;
 
-  [data-slot="message-part-tool-error-icon"] {
+  [data-slot="icon-svg"] {
     color: var(--icon-critical-base);
     margin-top: 4px;
   }

packages/ui/src/components/message-part.tsx

@@ -140,7 +140,7 @@ PART_MAPPING["tool"] = function ToolPartDisplay(props) {
             return (
               <Card variant="error">
                 <div data-component="tool-error">
-                  <Icon name="circle-ban-sign" size="small" data-slot="message-part-tool-error-icon" />
+                  <Icon name="circle-ban-sign" size="small" />
                   <Switch>
                     <Match when={title && title.length < 30}>
                       <div data-slot="message-part-tool-error-content">

packages/ui/src/components/select-dialog.tsx

@@ -91,7 +91,7 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
       </Dialog.Header>
       <div data-component="select-dialog-input">
         <div data-slot="select-dialog-input-container">
-          <Icon data-slot="select-dialog-icon" name="magnifying-glass" />
+          <Icon name="magnifying-glass" />
           <Input
             data-slot="select-dialog-input"
             type="text"
@@ -108,7 +108,6 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
         </div>
         <Show when={filter()}>
           <IconButton
-            data-slot="select-dialog-clear-button"
             icon="circle-x"
             variant="ghost"
             onClick={() => {