Remove inline in Inbox. Panel, presenters fixes. (#3665)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/presentation/src/components/AttributeBarEditor.svelte

@@ -66,7 +66,7 @@
 {#if editor}
   {#if showHeader}
     <span
-      class="label"
+      class="labelOnPanel"
       use:tooltip={{
         component: Label,
         props: { label: attribute.label }

packages/presentation/src/components/NavLink.svelte

@@ -23,6 +23,7 @@
   export let colorInherit: boolean = false
   export let shrink: number = 1
   export let accent: boolean = false
+  export let noOverflow: boolean = false
 
   function clickHandler (e: MouseEvent) {
     if (disabled) return
@@ -54,6 +55,7 @@
   <span
     class:cursor-pointer={!disabled}
     class:noUnderline
+    class:noOverflow
     class:inline
     class:colorInherit
     class:fs-bold={accent}
@@ -66,6 +68,7 @@
   <a
     {href}
     class:noUnderline
+    class:noOverflow
     class:inline
     class:colorInherit
     class:fs-bold={accent}
@@ -82,12 +85,14 @@
     display: flex;
     align-items: center;
     min-width: 0;
-    // overflow: hidden;
+    font-weight: inherit;
+
+    &:not(.noOverflow) {
+      overflow: hidden;
       white-space: nowrap;
       word-break: break-all;
       text-overflow: ellipsis;
-    font-weight: inherit;
+    }
-
     &:not(.colorInherit) {
       color: var(--theme-content-color);
     }

packages/theme/styles/panel.scss

@@ -299,11 +299,11 @@
           height: 1px;
           background-color: var(--theme-divider-color);
         }
-        .label,
+        .labelOnPanel,
         .labelTop { color: var(--theme-dark-color); }
         .labelTop {
           align-self: start;
-          margin-top: 0.625rem;
+          margin-top: .4rem;
         }
         .textPadding { margin-left: .875rem; }
       }

plugins/contact-resources/src/components/OrganizationPresenter.svelte

@@ -24,21 +24,22 @@
   export let inline: boolean = false
   export let disabled: boolean = false
   export let accent: boolean = false
+  export let noUnderline: boolean = false
   export let maxWidth = ''
 </script>
 
 {#if value}
-  <DocNavLink {disabled} {inline} object={value} {accent} noUnderline={disabled}>
+  <DocNavLink {disabled} {inline} object={value} {accent} {noUnderline}>
     {#if inline}
       <span class="antiMention" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
         @{value.name}
       </span>
     {:else}
       <div class="flex-presenter" style:max-width={maxWidth} use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
-        {#if !inline}
         <div class="icon circle"><Company size={'small'} /></div>
-        {/if}
+        <span class="overflow-label label" class:no-underline={noUnderline || disabled} class:fs-bold={accent}
-        <span class="overflow-label label" class:no-underline={disabled} class:fs-bold={accent}>{value.name}</span>
+          >{value.name}</span
+        >
       </div>
     {/if}
   </DocNavLink>

plugins/contact-resources/src/components/PersonContent.svelte

@@ -36,6 +36,7 @@
   export let shouldShowName = true
   export let element: HTMLElement | undefined = undefined
   export let shouldShowPlaceholder = false
+  export let noUnderline: boolean = false
   export let defaultName: IntlString | undefined = undefined
   export let statusLabel: IntlString | undefined = undefined
   export let avatarSize: IconSize = 'x-small'
@@ -68,7 +69,7 @@
 </script>
 
 {#if value}
-  <DocNavLink object={value} onClick={onEdit} {disabled} noUnderline={disabled} {inline} {colorInherit} {accent}>
+  <DocNavLink object={value} onClick={onEdit} {disabled} {noUnderline} {inline} {colorInherit} {accent} noOverflow>
     {#if inline}
       <span class="antiMention" use:tooltip={disabled ? undefined : showTooltip}>
         @{getName(client.getHierarchy(), value)}
@@ -90,7 +91,7 @@
           </span>
         {/if}
         {#if shouldShowName}
-          <span class="eContentPresenterLabel" class:colorInherit class:fs-bold={accent}
+          <span class="eContentPresenterLabel overflow-label" class:colorInherit class:fs-bold={accent}
             >{getName(client.getHierarchy(), value)}</span
           >
         {/if}
@@ -132,6 +133,7 @@
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
+    min-width: 0;
 
     .eContentPresenterIcon {
       color: var(--theme-dark-color);
@@ -141,13 +143,13 @@
       text-align: left;
       color: var(--theme-caption-color);
 
-      overflow: hidden;
+      // overflow: hidden;
-      display: -webkit-box;
+      // display: -webkit-box;
-      /* autoprefixer: ignore next */
+      // /* autoprefixer: ignore next */
-      -webkit-box-orient: vertical;
+      // -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
+      // -webkit-line-clamp: 2;
-      line-clamp: 2;
+      // line-clamp: 2;
-      user-select: none;
+      // user-select: none;
 
       &.colorInherit {
         color: inherit;

plugins/contact-resources/src/components/PersonPresenter.svelte

@@ -29,6 +29,7 @@
   export let shouldShowAvatar = true
   export let shouldShowName = true
   export let shouldShowPlaceholder = false
+  export let noUnderline = false
   export let defaultName: IntlString | undefined = ui.string.NotSelected
   export let statusLabel: IntlString | undefined = undefined
   export let tooltipLabels: PersonLabelTooltip | undefined = undefined
@@ -88,6 +89,7 @@
     {shouldShowAvatar}
     {shouldShowName}
     {shouldShowPlaceholder}
+    {noUnderline}
     {enlargedText}
     {statusLabel}
     {colorInherit}

plugins/document-resources/src/components/DocumentPresenter.svelte

@@ -25,20 +25,25 @@
   export let inline: boolean = false
   export let disabled: boolean = false
   export let accent: boolean = false
+  export let noUnderline: boolean = false
+  export let maxWidth = ''
 </script>
 
 {#if value}
-  <DocNavLink {disabled} object={value} {inline} {accent} noUnderline={disabled} component={document.component.EditDoc}>
+  <DocNavLink {disabled} object={value} {inline} {accent} {noUnderline} component={document.component.EditDoc}>
     {#if inline}
       <span class="antiMention" use:tooltip={{ label: document.string.Document }}>
         @{value.name}-{value.version}
       </span>
     {:else}
+      <div class="flex-presenter" style:max-width={maxWidth} use:tooltip={{ label: document.string.Document }}>
         <div class="icon">
           <Icon icon={document.icon.Document} size={'small'} />
         </div>
-      <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}-{value.version}</span
+        <span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}>
-      >
+          {value.name}-{value.version}
+        </span>
+      </div>
     {/if}
   </DocNavLink>
 {/if}

plugins/document-resources/src/components/EditDoc.svelte

@@ -535,7 +535,7 @@
 
       <div class="doc-divider" />
       <div class="popupPanel-body__aside-grid">
-        <span class="label labelTop">
+        <span class="labelTop">
           <Label label={document.string.Labels} />
         </span>
         <div class="flex">
@@ -545,7 +545,7 @@
           />
         </div>
         <div class="divider" />
-        <span class="label">
+        <span class="labelOnPanel">
           <Label label={document.string.LastRevision} />
         </span>
         <span>{documentObject?.latest}</span>

plugins/lead-resources/src/components/LeadPresenter.svelte

@@ -23,16 +23,19 @@
   export let inline: boolean = false
   export let disabled: boolean = false
   export let accent: boolean = false
+  export let noUnderline: boolean = false
 </script>
 
 {#if value}
-  <DocNavLink object={value} {inline} {disabled} noUnderline={disabled} {accent}>
+  <DocNavLink object={value} {inline} {disabled} {noUnderline} {accent}>
     {#if inline}
       <span class="antiMention" use:tooltip={{ label: lead.string.Lead }}>@LEAD-{value.number}</span>
     {:else}
       <div class="flex-presenter">
         <div class="icon"><Icon icon={lead.icon.Lead} size={'small'} /></div>
-        <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>LEAD-{value.number}</span>
+        <span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}
+          >LEAD-{value.number}</span
+        >
       </div>
     {/if}
   </DocNavLink>

plugins/notification-resources/src/components/NotificationView.svelte

@@ -96,7 +96,7 @@
     >
       <div class="flex-row-center flex-no-shrink mr-8">
         {#if presenter}
-          <svelte:component this={presenter} value={doc} inline accent disabled inbox />
+          <svelte:component this={presenter} value={doc} accent disabled inbox />
         {/if}
         {#if newTxes > 0 && !selected}
           <div class="counter float">{newTxes}</div>

plugins/notification-resources/src/components/TxView.svelte

@@ -161,9 +161,9 @@
                   <span class="lower"><Label label={m.label} /></span>
                   {#each value.added as cvalue}
                     {#if value.isObjectAdded}
-                      <ObjectPresenter value={cvalue} inline />
+                      <ObjectPresenter value={cvalue} />
                     {:else}
-                      <svelte:component this={m.presenter} value={cvalue} inline />
+                      <svelte:component this={m.presenter} value={cvalue} />
                     {/if}
                   {/each}
                 {:else if value.removed.length}
@@ -172,9 +172,9 @@
                   <span class="lower"><Label label={m.label} /></span>
                   {#each value.removed as cvalue}
                     {#if value.isObjectRemoved}
-                      <ObjectPresenter value={cvalue} inline />
+                      <ObjectPresenter value={cvalue} />
                     {:else}
-                      <svelte:component this={m.presenter} value={cvalue} inline />
+                      <svelte:component this={m.presenter} value={cvalue} />
                     {/if}
                   {/each}
                 {:else if value.set === null || value.set === undefined || value.set === ''}
@@ -188,9 +188,9 @@
                   {#if !hasMessageType}
                     <span class="strong">
                       {#if value.isObjectSet}
-                        <ObjectPresenter value={value.set} inline accent />
+                        <ObjectPresenter value={value.set} accent />
                       {:else}
-                        <svelte:component this={m.presenter} value={value.set} inline accent />
+                        <svelte:component this={m.presenter} value={value.set} accent />
                       {/if}
                     </span>
                   {/if}
@@ -211,9 +211,9 @@
                   {#if !hasMessageType}
                     <div class="strong">
                       {#if value.isObjectSet}
-                        <ObjectPresenter value={value.set} inline accent />
+                        <ObjectPresenter value={value.set} accent />
                       {:else}
-                        <svelte:component this={m.presenter} value={value.set} inline accent />
+                        <svelte:component this={m.presenter} value={value.set} accent />
                       {/if}
                     </div>
                   {/if}
@@ -222,9 +222,9 @@
             {/each}
           {:else if viewlet && viewlet.display === 'inline' && viewlet.component}
             {#if typeof viewlet.component === 'string'}
-              <Component is={viewlet.component} {props} inline />
+              <Component is={viewlet.component} {props} />
             {:else}
-              <svelte:component this={viewlet.component} {...props} inline />
+              <svelte:component this={viewlet.component} {...props} />
             {/if}
           {/if}
         </div>

plugins/recruit-resources/src/components/ApplicationPresenter.svelte

@@ -24,6 +24,7 @@
   export let value: Applicant
   export let inline: boolean = false
   export let disabled: boolean = false
+  export let noUnderline: boolean = false
   export let accent: boolean = false
 
   const client = getClient()
@@ -31,7 +32,7 @@
 </script>
 
 {#if value && shortLabel}
-  <DocNavLink object={value} {inline} {disabled} noUnderline={disabled} {accent}>
+  <DocNavLink object={value} {inline} {disabled} {noUnderline} {accent}>
     {#if inline}
       <span class="antiMention" use:tooltip={{ label: recruitPlg.string.Application }}>
         @{#if shortLabel}{shortLabel}-{/if}{value.number}
@@ -41,7 +42,7 @@
         <div class="icon">
           <Icon icon={recruit.icon.Application} size={'small'} />
         </div>
-        <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>
+        <span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}>
           {#if shortLabel}{shortLabel}-{/if}{value.number}
         </span>
       </div>

plugins/recruit-resources/src/components/VacancyPresenter.svelte

@@ -26,6 +26,7 @@
   export let inline: boolean = false
   export let disabled: boolean = false
   export let accent: boolean = false
+  export let noUnderline: boolean = false
 
   const dispatch = createEventDispatcher()
   $: accentColor = getPlatformAvatarColorForTextDef(value.name, $themeStore.dark)
@@ -37,14 +38,7 @@
 </script>
 
 {#if value}
-  <DocNavLink
+  <DocNavLink {disabled} object={value} {inline} {accent} {noUnderline} component={recruit.component.EditVacancy}>
-    {disabled}
-    object={value}
-    {inline}
-    {accent}
-    noUnderline={disabled}
-    component={recruit.component.EditVacancy}
-  >
     {#if inline}
       <span class="antiMention" use:tooltip={{ label: recruit.string.Vacancy }}>
         @{value.name}
@@ -52,7 +46,9 @@
     {:else}
       <div class="flex-presenter" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
         <div class="icon"><Icon icon={recruit.icon.Vacancy} size={'small'} /></div>
-        <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}</span>
+        <span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}
+          >{value.name}</span
+        >
       </div>
     {/if}
   </DocNavLink>

plugins/recruit-resources/src/components/review/ReviewPresenter.svelte

@@ -24,6 +24,7 @@
   export let inline: boolean = false
   export let disabled: boolean = false
   export let accent: boolean = false
+  export let noUnderline: boolean = false
 
   const client = getClient()
 
@@ -31,12 +32,12 @@
 </script>
 
 {#if value && label}
-  <DocNavLink object={value} {inline} {disabled} {accent} noUnderline={disabled}>
+  <DocNavLink object={value} {inline} {disabled} {accent} {noUnderline}>
     <div class="flex-presenter" class:inline-presenter={inline}>
       <div class="icon">
         <Icon icon={recruit.icon.Review} size={'small'} />
       </div>
-      <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>
+      <span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}>
         {label}-{value.number}
       </span>
     </div>

plugins/task-resources/src/components/state/StatePresenter.svelte

@@ -31,6 +31,7 @@
   export let oneLine: boolean = false
   export let shouldShowName: boolean = true
   export let shouldShowTooltip: boolean = false
+  export let noUnderline: boolean = false
 
   const dispatch = createEventDispatcher()
 
@@ -57,7 +58,9 @@
       />
     {/if}
     {#if shouldShowName}
-      <span class="overflow-label label" class:nowrap={oneLine} class:no-underline={disabled}>{value.name}</span>
+      <span class="overflow-label label" class:nowrap={oneLine} class:no-underline={noUnderline || disabled}
+        >{value.name}</span
+      >
     {/if}
   </div>
 {/if}

plugins/tracker-resources/src/components/CreateIssue.svelte

@@ -566,7 +566,7 @@
       searchField={'title'}
       allowDeselect={true}
       showNavigate={false}
-      docProps={{ disabled: true }}
+      docProps={{ disabled: true, noUnderline: true }}
       focusIndex={20000}
     />
   </svelte:fragment>

plugins/tracker-resources/src/components/components/ComponentPresenter.svelte

@@ -50,9 +50,9 @@
   {#if inline}
     <span class="antiMention" use:tooltip={{ label: tracker.string.Component }}>@{label}</span>
   {:else}
-    <span class="flex-presenter" class:list={kind === 'list'}>
+    <span class="flex-presenter" class:list={kind === 'list'} use:tooltip={{ label: tracker.string.Component }}>
       {#if shouldShowAvatar}
-        <div class="icon" use:tooltip={{ label: tracker.string.Component }}>
+        <div class="icon">
           <Icon icon={tracker.icon.Component} size={'small'} />
         </div>
       {/if}

plugins/tracker-resources/src/components/issues/RelationEditor.svelte

@@ -21,7 +21,7 @@
   $: classes = Array.from(valueGroup.keys())
 </script>
 
-<div class="flex-column flex-grow">
+<div class="flex-column flex-grow clear-mins">
   {#each classes as classCategory}
     {@const vals = valueGroup.get(classCategory)}
     {#if vals}

plugins/tracker-resources/src/components/issues/RelationEditorPart.svelte

@@ -87,7 +87,7 @@
         <Icon {icon} size={'small'} />
         <div class="flex-grow">
           <button on:click|stopPropagation={() => handleRedirect(issue)}>
-            <span class="overflow-label ml-1-5 caption-color">{getIssueId(issue.$lookup.space, issue)}</span>
+            <span class="overflow-label ml-1-5 content-color">{getIssueId(issue.$lookup.space, issue)}</span>
           </button>
         </div>
         <button class="btn-close" on:click|stopPropagation={() => handleClick(issue)}>
@@ -96,15 +96,11 @@
       </div>
     {/if}
   {:else}
-    <div class="tag-container">
+    <div class="tag-container between">
-      <div class="flex-grow">
-        <div class="overflow-label max-w-30">
       <Component
         is={view.component.ObjectPresenter}
-            props={{ objectId: doc._id, _class: doc._class, value: doc, inline: true }}
+        props={{ objectId: doc._id, _class: doc._class, value: doc, noUnderline: true, props: { avatarSize: 'card' } }}
       />
-        </div>
-      </div>
       <button class="btn-close" on:click|stopPropagation={() => handleClick(doc)}>
         <Icon icon={IconClose} size={'x-small'} />
       </button>
@@ -118,14 +114,20 @@
     display: flex;
     align-items: center;
     // flex-shrink: 0;
-    padding-left: 0.5rem;
+    padding-left: 0.75rem;
     height: 2rem;
     min-width: 0;
     min-height: 0;
+    font-size: 0.8125rem;
     border-radius: 0.25rem;
     // width: fit-content;
     border: 1px solid transparent;
+
+    &.between {
+      justify-content: space-between;
+    }
     &:hover {
+      background-color: var(--theme-button-hovered);
       border-color: var(--theme-divider-color);
     }
 

plugins/tracker-resources/src/components/issues/edit/ControlPanel.svelte

@@ -95,7 +95,7 @@
 
 <div class="popupPanel-body__aside-grid">
   {#if issue.template?.template}
-    <span class="label">
+    <span class="labelOnPanel">
       <Label label={tracker.string.IssueTemplate} />
     </span>
     <ObjectBox
@@ -114,7 +114,7 @@
     />
   {/if}
 
-  <span class="label">
+  <span class="labelOnPanel">
     <Label label={tracker.string.Status} />
   </span>
 
@@ -139,12 +139,12 @@
     <RelationEditor value={issue} type="relations" />
   {/if}
 
-  <span class="label">
+  <span class="labelOnPanel">
     <Label label={tracker.string.Priority} />
   </span>
   <PriorityEditor value={issue} size={'medium'} shouldShowLabel />
 
-  <span class="label">
+  <span class="labelOnPanel">
     <Label label={core.string.CreatedBy} />
   </span>
   <EmployeeBox
@@ -158,7 +158,7 @@
     readonly
   />
 
-  <span class="label">
+  <span class="labelOnPanel">
     <Label label={tracker.string.Assignee} />
   </span>
   <AssigneeEditor object={issue} size={'medium'} avatarSize={'card'} width="100%" />
@@ -170,12 +170,12 @@
 
   <div class="divider" />
 
-  <span class="label">
+  <span class="labelOnPanel">
     <Label label={tracker.string.Component} />
   </span>
   <ComponentEditor value={issue} space={issue.space} size={'medium'} />
 
-  <span class="label">
+  <span class="labelOnPanel">
     <Label label={tracker.string.Milestone} />
   </span>
   <MilestoneEditor value={issue} space={issue.space} size={'medium'} />
@@ -183,7 +183,7 @@
   {#if issue.dueDate !== null}
     <div class="divider" />
 
-    <span class="label">
+    <span class="labelOnPanel">
       <Label label={tracker.string.DueDate} />
     </span>
     <DueDateEditor value={issue} width={'100%'} />

plugins/tracker-resources/src/components/milestones/MilestonePresenter.svelte

@@ -31,6 +31,7 @@
   export let disabled = false
   export let inline = false
   export let accent: boolean = false
+  export let noUnderline: boolean = false
   export let onClick: (() => void) | undefined = undefined
 
   const dispatch = createEventDispatcher()
@@ -46,17 +47,22 @@
 </script>
 
 {#if value}
-  <DocNavLink object={value} {disabled} {inline} {accent} noUnderline={disabled} {onClick}>
+  <DocNavLink object={value} {disabled} {inline} {accent} {noUnderline} {onClick}>
     {#if inline}
       <span class="antiMention" use:tooltip={{ label: tracker.string.Milestone }}>@{value.label}</span>
     {:else}
-      <div class="flex-presenter">
+      <div class="flex-presenter" use:tooltip={{ label: tracker.string.Milestone }}>
         {#if shouldShowAvatar}
           <div class="icon">
             <Icon icon={tracker.icon.Milestone} size="small" />
           </div>
         {/if}
-        <span title={value.label} class="overflow-label label" class:no-underline={disabled} class:fs-bold={accent}>
+        <span
+          title={value.label}
+          class="overflow-label label"
+          class:no-underline={noUnderline || disabled}
+          class:fs-bold={accent}
+        >
           {value.label}
         </span>
       </div>

plugins/tracker-resources/src/components/templates/IssueTemplatePresenter.svelte

@@ -65,7 +65,9 @@
       cursor: pointer;
     }
 
-    &.noUnderline {
+    &.noUnderline,
+    &.noUnderline:hover {
+      text-decoration: none;
       color: var(--theme-caption-color);
     }
 

plugins/tracker-resources/src/components/templates/TemplateControlPanel.svelte

@@ -65,12 +65,12 @@
 </script>
 
 <div class="popupPanel-body__aside-grid">
-  <span class="label">
+  <span class="labelOnPanel">
     <Label label={tracker.string.Priority} />
   </span>
   <PriorityEditor value={issue} size={'medium'} shouldShowLabel />
 
-  <span class="label">
+  <span class="labelOnPanel">
     <Label label={tracker.string.Assignee} />
   </span>
   <AssigneeEditor object={issue} size={'medium'} width="100%" />
@@ -99,13 +99,13 @@
 
   <div class="divider" />
 
-  <span class="label">
+  <span class="labelOnPanel">
     <Label label={tracker.string.Component} />
   </span>
   <ComponentEditor value={issue} size={'medium'} />
 
   {#if issue.milestone}
-    <span class="label">
+    <span class="labelOnPanel">
       <Label label={tracker.string.Milestone} />
     </span>
     <MilestoneEditor value={issue} size={'medium'} />

plugins/view-resources/src/components/DocNavLink.svelte

@@ -29,6 +29,7 @@
   export let props: Record<string, any> = {}
   export let shrink: number = 1
   export let accent: boolean = false
+  export let noOverflow: boolean = false
 
   const client = getClient()
   const hierarchy = client.getHierarchy()
@@ -50,4 +51,6 @@
   $: if (object !== undefined) getHref(object)
 </script>
 
-<NavLink {disabled} {onClick} {noUnderline} {inline} {shrink} {href} {colorInherit} {accent}><slot /></NavLink>
+<NavLink {disabled} {onClick} {noUnderline} {inline} {shrink} {href} {colorInherit} {accent} {noOverflow}
+  ><slot /></NavLink
+>

plugins/view-resources/src/components/ObjectBox.svelte

@@ -142,7 +142,7 @@
               objectId={selected._id}
               _class={selected._class}
               value={selected}
-              props={{ ...docProps, disabled: true, noUnderline: true, size: 'x-small' }}
+              props={{ ...docProps, disabled: true, noUnderline: true, size: 'x-small', shouldShowAvatar: false }}
             />
           {:else}
             <Label {label} />

plugins/view-resources/src/components/ObjectPresenter.svelte

@@ -70,11 +70,11 @@
   <svelte:component
     this={presenter.presenter}
     value={doc}
-    {...props}
     {inline}
     {accent}
     {shouldShowAvatar}
     {noUnderline}
+    {...props}
     on:accent-color
   />
 {/if}