@motion-proto/live-tokens 0.1.1 → 0.3.2

package/src/components/SegmentedControl.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  type Segment = {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+  };
+
+  export let segments: Segment[] = [];
+  export let value: string = '';
+  export let disabled: boolean = false;
+  export let forceHoverValue: string | null = null;
+
+  const dispatch = createEventDispatcher<{ change: string }>();
+
+  function select(v: string) {
+    value = v;
+    dispatch('change', v);
+  }
+</script>
+
+<div class="segmented-control" class:is-disabled={disabled} role="radiogroup">
+  {#each segments as seg, i (seg.value)}
+    {#if i > 0}
+      <span class="segment-divider" aria-hidden="true"></span>
+    {/if}
+    <button
+      type="button"
+      class="segment"
+      class:selected={value === seg.value}
+      class:force-hover={forceHoverValue === seg.value}
+      disabled={disabled || seg.disabled}
+      role="radio"
+      aria-checked={value === seg.value}
+      on:click={() => select(seg.value)}
+    >
+      {#if seg.icon}<i class={seg.icon}></i>{/if}
+      <span>{seg.label}</span>
+    </button>
+  {/each}
+</div>
+
+<style lang="scss">
+  @use '../styles/padding' as *;
+
+  :global(:root) {
+    /* Bar (outer wrapper) */
+    --segmentedcontrol-bar-surface: var(--surface-neutral-high);
+    --segmentedcontrol-bar-border: var(--border-neutral);
+    --segmentedcontrol-bar-border-width: var(--border-width-1);
+    --segmentedcontrol-bar-radius: var(--radius-lg);
+    --segmentedcontrol-bar-padding: var(--space-4);
+    --segmentedcontrol-bar-gap: var(--space-8);
+
+    /* Divider (line between non-selected options) */
+    --segmentedcontrol-divider-color: var(--border-neutral);
+    --segmentedcontrol-divider-thickness: var(--border-width-1);
+    --segmentedcontrol-divider-height: var(--space-12);
+
+    /* Option — default */
+    --segmentedcontrol-option-text: var(--text-primary);
+    --segmentedcontrol-option-text-font-family: var(--font-sans);
+    --segmentedcontrol-option-text-font-size: var(--font-size-md);
+    --segmentedcontrol-option-text-font-weight: var(--font-weight-normal);
+    --segmentedcontrol-option-text-line-height: var(--line-height-normal);
+    --segmentedcontrol-option-icon: var(--text-secondary);
+    --segmentedcontrol-option-icon-size: var(--icon-size-md);
+
+    /* Option — hover */
+    --segmentedcontrol-option-hover-surface: var(--surface-neutral-higher);
+    --segmentedcontrol-option-hover-text: var(--text-primary);
+    --segmentedcontrol-option-hover-text-font-family: var(--font-sans);
+    --segmentedcontrol-option-hover-text-font-size: var(--font-size-md);
+    --segmentedcontrol-option-hover-text-font-weight: var(--font-weight-normal);
+    --segmentedcontrol-option-hover-text-line-height: var(--line-height-normal);
+    --segmentedcontrol-option-hover-icon: var(--text-secondary);
+    --segmentedcontrol-option-hover-icon-size: var(--icon-size-md);
+
+    /* Selected (inner pill) — looks the same hovered or not */
+    --segmentedcontrol-selected-surface: var(--surface-success-high);
+    --segmentedcontrol-selected-text: var(--text-primary);
+    --segmentedcontrol-selected-text-font-family: var(--font-sans);
+    --segmentedcontrol-selected-text-font-size: var(--font-size-md);
+    --segmentedcontrol-selected-text-font-weight: var(--font-weight-semibold);
+    --segmentedcontrol-selected-text-line-height: var(--line-height-normal);
+    --segmentedcontrol-selected-icon: var(--text-secondary);
+    --segmentedcontrol-selected-icon-size: var(--icon-size-md);
+    --segmentedcontrol-selected-border: var(--border-success);
+    --segmentedcontrol-selected-border-width: var(--border-width-1);
+    --segmentedcontrol-selected-radius: var(--radius-md);
+
+    /* Disabled (whole component state — overrides both option and selected styling) */
+    --segmentedcontrol-disabled-surface: var(--surface-neutral-high);
+    --segmentedcontrol-disabled-text: var(--text-tertiary);
+    --segmentedcontrol-disabled-text-font-family: var(--font-sans);
+    --segmentedcontrol-disabled-text-font-size: var(--font-size-md);
+    --segmentedcontrol-disabled-text-font-weight: var(--font-weight-light);
+    --segmentedcontrol-disabled-text-line-height: var(--line-height-normal);
+    --segmentedcontrol-disabled-icon: var(--text-tertiary);
+    --segmentedcontrol-disabled-icon-size: var(--icon-size-md);
+  }
+
+  .segmented-control {
+    display: inline-flex;
+    align-items: stretch;
+    gap: var(--segmentedcontrol-bar-gap);
+    @include themed-padding(--segmentedcontrol-bar-padding);
+    background: var(--segmentedcontrol-bar-surface);
+    border: var(--segmentedcontrol-bar-border-width) solid var(--segmentedcontrol-bar-border);
+    border-radius: var(--segmentedcontrol-bar-radius);
+  }
+
+  .segment {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-8);
+    padding: var(--space-6) var(--space-16);
+    background: transparent;
+    border: 0;
+    border-radius: var(--segmentedcontrol-selected-radius);
+    color: var(--segmentedcontrol-option-text);
+    font-family: var(--segmentedcontrol-option-text-font-family);
+    font-size: var(--segmentedcontrol-option-text-font-size);
+    font-weight: var(--segmentedcontrol-option-text-font-weight);
+    line-height: var(--segmentedcontrol-option-text-line-height);
+    cursor: pointer;
+    transition: background var(--duration-150), color var(--duration-150);
+    position: relative;
+  }
+
+  .segment i {
+    font-size: var(--segmentedcontrol-option-icon-size);
+    color: var(--segmentedcontrol-option-icon);
+    transition: color var(--duration-150);
+  }
+
+  /* Short centered divider between adjacent segments. Negative margins absorb
+     the surrounding flex gap so seg-to-seg distance stays var(--bar-gap). */
+  .segment-divider {
+    align-self: center;
+    flex-shrink: 0;
+    width: var(--segmentedcontrol-divider-thickness);
+    height: var(--segmentedcontrol-divider-height);
+    margin-inline: calc(
+      var(--segmentedcontrol-bar-gap) * -0.5 - var(--segmentedcontrol-divider-thickness) * 0.5
+    );
+    background: var(--segmentedcontrol-divider-color);
+    pointer-events: none;
+  }
+
+  .segment:hover:not(:disabled):not(.selected),
+  .segment.force-hover:not(:disabled):not(.selected) {
+    background: var(--segmentedcontrol-option-hover-surface);
+    color: var(--segmentedcontrol-option-hover-text);
+    font-family: var(--segmentedcontrol-option-hover-text-font-family);
+    font-size: var(--segmentedcontrol-option-hover-text-font-size);
+    font-weight: var(--segmentedcontrol-option-hover-text-font-weight);
+    line-height: var(--segmentedcontrol-option-hover-text-line-height);
+  }
+
+  .segment:hover:not(:disabled):not(.selected) i,
+  .segment.force-hover:not(:disabled):not(.selected) i {
+    color: var(--segmentedcontrol-option-hover-icon);
+    font-size: var(--segmentedcontrol-option-hover-icon-size);
+  }
+
+  .segment.selected {
+    background: var(--segmentedcontrol-selected-surface);
+    border: var(--segmentedcontrol-selected-border-width) solid var(--segmentedcontrol-selected-border);
+    border-radius: var(--segmentedcontrol-selected-radius);
+    color: var(--segmentedcontrol-selected-text);
+    font-family: var(--segmentedcontrol-selected-text-font-family);
+    font-size: var(--segmentedcontrol-selected-text-font-size);
+    font-weight: var(--segmentedcontrol-selected-text-font-weight);
+    line-height: var(--segmentedcontrol-selected-text-line-height);
+    /* Account for border so the pill doesn't shift adjacent segments */
+    padding: calc(var(--space-6) - var(--segmentedcontrol-selected-border-width))
+      calc(var(--space-16) - var(--segmentedcontrol-selected-border-width));
+  }
+
+  .segment.selected i {
+    color: var(--segmentedcontrol-selected-icon);
+    font-size: var(--segmentedcontrol-selected-icon-size);
+  }
+
+  .segment:disabled {
+    background: var(--segmentedcontrol-disabled-surface);
+    color: var(--segmentedcontrol-disabled-text);
+    font-family: var(--segmentedcontrol-disabled-text-font-family);
+    font-size: var(--segmentedcontrol-disabled-text-font-size);
+    font-weight: var(--segmentedcontrol-disabled-text-font-weight);
+    line-height: var(--segmentedcontrol-disabled-text-line-height);
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .segment:disabled i {
+    color: var(--segmentedcontrol-disabled-icon);
+    font-size: var(--segmentedcontrol-disabled-icon-size);
+  }
+</style>

package/src/components/TabBar.svelte

@@ -11,6 +11,8 @@
   export let tabs: Tab[] = [];
   export let selectedTab: string = '';
   export let iconOnly: boolean = false;
+  let className: string = '';
+  export { className as class };
 
   const dispatch = createEventDispatcher<{
     tabChange: string;
@@ -23,7 +25,7 @@
   }
 </script>
 
-<div class="tab-bar">
+<div class="tab-bar {className}">
   {#each tabs as tab}
     <button
       class="tab"
@@ -42,43 +44,153 @@
   {/each}
 </div>
 
-<style>
+<style lang="scss">
+  @use '../styles/padding' as *;
+
+  :global(:root) {
+    /* Bar */
+    --tabbar-bar-divider: var(--border-neutral-subtle);
+    --tabbar-bar-divider-thickness: var(--border-width-1);
+    --tabbar-bar-indicator-thickness: var(--border-width-2);
+    --tabbar-bar-top-margin: var(--space-0);
+    --tabbar-bar-bottom-padding: var(--space-0);
+    --tabbar-bar-bottom-margin: var(--space-0);
+    --tabbar-tab-gap: var(--space-2);
+
+    /* Default tab */
+    --tabbar-default-text: var(--text-tertiary);
+    --tabbar-default-text-font-family: var(--font-sans);
+    --tabbar-default-text-font-size: var(--font-size-md);
+    --tabbar-default-text-font-weight: var(--font-weight-light);
+    --tabbar-default-text-line-height: var(--line-height-normal);
+    --tabbar-default-icon-size: var(--icon-size-md);
+    --tabbar-default-padding: var(--space-8);
+    --tabbar-default-border: var(--color-transparent);
+    --tabbar-default-surface: var(--color-transparent);
+    --tabbar-default-tab-border-color: var(--color-transparent);
+    --tabbar-default-tab-border-width: var(--border-width-0);
+    --tabbar-default-tab-top-radius: var(--radius-none);
+    --tabbar-default-tab-bottom-radius: var(--radius-none);
+
+    /* Hover tab */
+    --tabbar-hover-text: var(--text-secondary);
+    --tabbar-hover-surface: var(--surface-neutral-lower);
+    --tabbar-hover-text-font-family: var(--font-sans);
+    --tabbar-hover-text-font-size: var(--font-size-md);
+    --tabbar-hover-text-font-weight: var(--font-weight-light);
+    --tabbar-hover-text-line-height: var(--line-height-normal);
+    --tabbar-hover-icon-size: var(--icon-size-md);
+    --tabbar-hover-padding: var(--space-8);
+    --tabbar-hover-border: var(--color-transparent);
+    --tabbar-hover-tab-border-color: var(--color-transparent);
+    --tabbar-hover-tab-border-width: var(--border-width-0);
+    --tabbar-hover-tab-top-radius: var(--radius-none);
+    --tabbar-hover-tab-bottom-radius: var(--radius-none);
+
+    /* Active tab */
+    --tabbar-active-text: var(--text-primary);
+    --tabbar-active-border: var(--color-brand-500);
+    --tabbar-active-surface: var(--overlay-lowest);
+    --tabbar-active-text-font-family: var(--font-sans);
+    --tabbar-active-text-font-size: var(--font-size-md);
+    --tabbar-active-text-font-weight: var(--font-weight-light);
+    --tabbar-active-text-line-height: var(--line-height-normal);
+    --tabbar-active-icon-size: var(--icon-size-md);
+    --tabbar-active-padding: var(--space-8);
+    --tabbar-active-tab-border-color: var(--color-transparent);
+    --tabbar-active-tab-border-width: var(--border-width-0);
+    --tabbar-active-tab-top-radius: var(--radius-none);
+    --tabbar-active-tab-bottom-radius: var(--radius-none);
+
+    /* Disabled tab */
+    --tabbar-disabled-text: var(--text-disabled);
+    --tabbar-disabled-text-font-family: var(--font-sans);
+    --tabbar-disabled-text-font-size: var(--font-size-md);
+    --tabbar-disabled-text-font-weight: var(--font-weight-light);
+    --tabbar-disabled-text-line-height: var(--line-height-normal);
+    --tabbar-disabled-icon-size: var(--icon-size-md);
+    --tabbar-disabled-padding: var(--space-8);
+    --tabbar-disabled-border: var(--color-transparent);
+    --tabbar-disabled-surface: var(--color-transparent);
+    --tabbar-disabled-tab-border-color: var(--color-transparent);
+    --tabbar-disabled-tab-border-width: var(--border-width-0);
+    --tabbar-disabled-tab-top-radius: var(--radius-none);
+    --tabbar-disabled-tab-bottom-radius: var(--radius-none);
+  }
+
   .tab-bar {
     display: flex;
-    gap: var(--space-2);
-    border-bottom: 1px solid var(--border-neutral-subtle);
-    padding: 0 var(--space-8);
+    gap: var(--tabbar-tab-gap);
+    border-bottom: var(--tabbar-bar-divider-thickness) solid var(--tabbar-bar-divider);
+    margin-top: var(--tabbar-bar-top-margin);
+    padding-bottom: var(--tabbar-bar-bottom-padding);
+    margin-bottom: var(--tabbar-bar-bottom-margin);
   }
 
   .tab {
     display: inline-flex;
     align-items: center;
     gap: var(--space-6);
-    padding: var(--space-8) var(--space-16);
-    background: transparent;
-    border: none;
-    border-bottom: 2px solid transparent;
-    color: var(--text-tertiary);
-    font-size: var(--font-md);
-    font-weight: var(--font-weight-medium);
+    @include themed-padding(--tabbar-default-padding, $h: 2);
+    background: var(--tabbar-default-surface);
+    border: var(--tabbar-default-tab-border-width) solid var(--tabbar-default-tab-border-color);
+    /* indicator accent — owns the bottom edge */
+    border-bottom: var(--tabbar-bar-indicator-thickness) solid var(--tabbar-default-border);
+    border-radius: var(--tabbar-default-tab-top-radius) var(--tabbar-default-tab-top-radius) var(--tabbar-default-tab-bottom-radius) var(--tabbar-default-tab-bottom-radius);
+    color: var(--tabbar-default-text);
+    font-family: var(--tabbar-default-text-font-family);
+    font-size: var(--tabbar-default-text-font-size);
+    font-weight: var(--tabbar-default-text-font-weight);
+    line-height: var(--tabbar-default-text-line-height);
     cursor: pointer;
-    transition: all var(--transition-fast);
+    transition: all var(--duration-150);
     position: relative;
   }
 
-  .tab:hover:not(:disabled):not(.active) {
-    color: var(--text-secondary);
-    background: var(--hover-low);
+  .tab:hover:not(:disabled):not(.active),
+  .tab-bar.force-hover .tab:not(:disabled):not(.active) {
+    color: var(--tabbar-hover-text);
+    background: var(--tabbar-hover-surface);
+    border-color: var(--tabbar-hover-tab-border-color);
+    border-width: var(--tabbar-hover-tab-border-width);
+    /* indicator accent owns the bottom edge */
+    border-bottom: var(--tabbar-bar-indicator-thickness) solid var(--tabbar-hover-border);
+    border-radius: var(--tabbar-hover-tab-top-radius) var(--tabbar-hover-tab-top-radius) var(--tabbar-hover-tab-bottom-radius) var(--tabbar-hover-tab-bottom-radius);
+    font-family: var(--tabbar-hover-text-font-family);
+    font-size: var(--tabbar-hover-text-font-size);
+    font-weight: var(--tabbar-hover-text-font-weight);
+    line-height: var(--tabbar-hover-text-line-height);
+    @include themed-padding(--tabbar-hover-padding, $h: 2);
   }
 
   .tab.active {
-    color: var(--text-primary);
-    border-bottom-color: var(--color-primary-500);
-    background: linear-gradient(to bottom, transparent, var(--overlay-lowest));
+    color: var(--tabbar-active-text);
+    background: var(--tabbar-active-surface);
+    border-color: var(--tabbar-active-tab-border-color);
+    border-width: var(--tabbar-active-tab-border-width);
+    /* indicator accent owns the bottom edge */
+    border-bottom: var(--tabbar-bar-indicator-thickness) solid var(--tabbar-active-border);
+    border-radius: var(--tabbar-active-tab-top-radius) var(--tabbar-active-tab-top-radius) var(--tabbar-active-tab-bottom-radius) var(--tabbar-active-tab-bottom-radius);
+    font-family: var(--tabbar-active-text-font-family);
+    font-size: var(--tabbar-active-text-font-size);
+    font-weight: var(--tabbar-active-text-font-weight);
+    line-height: var(--tabbar-active-text-line-height);
+    @include themed-padding(--tabbar-active-padding, $h: 2);
   }
 
   .tab:disabled {
-    opacity: var(--opacity-disabled);
+    color: var(--tabbar-disabled-text);
+    background: var(--tabbar-disabled-surface);
+    border-color: var(--tabbar-disabled-tab-border-color);
+    border-width: var(--tabbar-disabled-tab-border-width);
+    /* indicator accent owns the bottom edge */
+    border-bottom: var(--tabbar-bar-indicator-thickness) solid var(--tabbar-disabled-border);
+    border-radius: var(--tabbar-disabled-tab-top-radius) var(--tabbar-disabled-tab-top-radius) var(--tabbar-disabled-tab-bottom-radius) var(--tabbar-disabled-tab-bottom-radius);
+    font-family: var(--tabbar-disabled-text-font-family);
+    font-size: var(--tabbar-disabled-text-font-size);
+    font-weight: var(--tabbar-disabled-text-font-weight);
+    line-height: var(--tabbar-disabled-text-line-height);
+    @include themed-padding(--tabbar-disabled-padding, $h: 2);
     cursor: not-allowed;
   }
 
@@ -86,7 +198,20 @@
     padding: var(--space-8) var(--space-12);
   }
 
+  .tab:hover:not(:disabled):not(.active) i,
+  .tab-bar.force-hover .tab:not(:disabled):not(.active) i {
+    font-size: var(--tabbar-hover-icon-size);
+  }
+
+  .tab.active i {
+    font-size: var(--tabbar-active-icon-size);
+  }
+
+  .tab:disabled i {
+    font-size: var(--tabbar-disabled-icon-size);
+  }
+
   .tab i {
-    font-size: var(--font-md);
+    font-size: var(--tabbar-default-icon-size);
   }
 </style>

package/src/components/Table.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+</script>
+
+<div class="table-wrapper">
+  <slot />
+</div>
+
+<style lang="scss">
+  :global(:root) {
+    /* Wrapper */
+    --table-default-radius: var(--radius-md);
+    --table-default-border: var(--border-canvas-subtle);
+    --table-default-border-width: var(--border-width-1);
+    --table-default-shadow: var(--shadow-md);
+
+    /* Header */
+    --table-default-header-surface: var(--surface-canvas-low);
+    --table-default-header-text: var(--text-primary);
+    --table-default-header-font-family: var(--font-sans);
+    --table-default-header-font-size: var(--font-size-sm);
+    --table-default-header-font-weight: var(--font-weight-normal);
+    --table-default-header-line-height: var(--line-height-tight);
+    --table-default-header-padding: var(--space-12);
+    --table-default-header-border: var(--border-canvas-subtle);
+    --table-default-header-border-width: var(--border-width-1);
+
+    /* Cell */
+    --table-default-cell-text: var(--text-secondary);
+    --table-default-cell-font-family: var(--font-sans);
+    --table-default-cell-font-size: var(--font-size-sm);
+    --table-default-cell-font-weight: var(--font-weight-normal);
+    --table-default-cell-line-height: var(--line-height-normal);
+    --table-default-cell-padding: var(--space-8);
+
+    /* Row */
+    --table-default-row-divider: var(--border-canvas-faint);
+    --table-default-row-divider-width: var(--border-width-1);
+    --table-default-row-stripe-surface: var(--surface-canvas-lower);
+
+    /* Column */
+    --table-default-column-divider: var(--border-canvas-faint);
+    --table-default-column-divider-width: var(--border-width-0);
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+    margin: var(--space-12) 0;
+    -webkit-overflow-scrolling: touch;
+    border: var(--table-default-border-width) solid var(--table-default-border);
+    border-radius: var(--table-default-radius);
+    box-shadow: var(--table-default-shadow);
+  }
+
+  .table-wrapper :global(table) {
+    width: 100%;
+    border-collapse: collapse;
+    min-width: 400px;
+    margin: 0;
+  }
+
+  .table-wrapper :global(th) {
+    background: var(--table-default-header-surface);
+    color: var(--table-default-header-text);
+    font-family: var(--table-default-header-font-family);
+    font-size: var(--table-default-header-font-size);
+    font-weight: var(--table-default-header-font-weight);
+    line-height: var(--table-default-header-line-height);
+    padding: var(--table-default-header-padding);
+    text-align: left;
+    border-bottom: var(--table-default-header-border-width) solid var(--table-default-header-border);
+    border-right: var(--table-default-column-divider-width) solid var(--table-default-column-divider);
+    white-space: nowrap;
+  }
+
+  .table-wrapper :global(td) {
+    color: var(--table-default-cell-text);
+    font-family: var(--table-default-cell-font-family);
+    font-size: var(--table-default-cell-font-size);
+    font-weight: var(--table-default-cell-font-weight);
+    line-height: var(--table-default-cell-line-height);
+    padding:
+      var(--table-default-cell-padding-top, var(--table-default-cell-padding))
+      var(--table-default-cell-padding-right, calc(var(--table-default-cell-padding) * 1.5))
+      var(--table-default-cell-padding-bottom, var(--table-default-cell-padding))
+      var(--table-default-cell-padding-left, calc(var(--table-default-cell-padding) * 1.5));
+    border-bottom: var(--table-default-row-divider-width) solid var(--table-default-row-divider);
+    border-right: var(--table-default-column-divider-width) solid var(--table-default-column-divider);
+  }
+
+  .table-wrapper :global(th:last-child),
+  .table-wrapper :global(td:last-child) {
+    border-right: none;
+  }
+
+  .table-wrapper :global(tr:nth-child(even) td) {
+    background: var(--table-default-row-stripe-surface);
+  }
+
+  .table-wrapper :global(tr:last-child td) {
+    border-bottom: none;
+  }
+</style>

package/src/components/Tooltip.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
   export let text: string = '';
   export let position: 'top' | 'bottom' = 'top';
+  export let open: boolean = false;
 </script>
 
-<div class="tooltip-wrapper">
+<div class="tooltip-wrapper" class:open>
   <slot />
   {#if text}
     <div class="tooltip" class:bottom={position === 'bottom'}>
@@ -13,6 +14,20 @@
 </div>
 
 <style>
+  :global(:root) {
+    --tooltip-surface: var(--surface-neutral-highest);
+    --tooltip-text: var(--text-primary);
+    --tooltip-text-font-family: var(--font-sans);
+    --tooltip-text-font-size: var(--font-size-sm);
+    --tooltip-text-font-weight: var(--font-weight-normal);
+    --tooltip-text-line-height: var(--line-height-normal);
+    --tooltip-border: var(--border-neutral);
+    --tooltip-border-width: var(--border-width-0);
+    --tooltip-radius: var(--radius-md);
+    --tooltip-padding: var(--space-6);
+    --tooltip-shadow: var(--shadow-md);
+  }
+
   .tooltip-wrapper {
     position: relative;
     display: inline-block;
@@ -20,45 +35,56 @@
 
   .tooltip {
     position: absolute;
-    bottom: calc(100% + 8px);
+    bottom: calc(100% + var(--space-8));
     left: 50%;
     transform: translateX(-50%);
-    background: var(--surface-neutral-highest);
-    color: var(--text-primary);
-    padding: var(--space-6) var(--space-12);
-    border-radius: var(--radius-md);
-    font-size: var(--font-sm);
+    background: var(--tooltip-surface);
+    color: var(--tooltip-text);
+    padding: var(--tooltip-padding) calc(var(--tooltip-padding) * 2);
+    border: var(--tooltip-border-width) solid var(--tooltip-border);
+    border-radius: var(--tooltip-radius);
+    font-family: var(--tooltip-text-font-family);
+    font-size: var(--tooltip-text-font-size);
+    font-weight: var(--tooltip-text-font-weight);
+    line-height: var(--tooltip-text-line-height);
     white-space: nowrap;
     pointer-events: none;
     opacity: 0;
-    transition: opacity var(--transition-fast);
+    transition: opacity var(--duration-150);
     z-index: var(--z-tooltip);
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--tooltip-shadow);
   }
 
   .tooltip::after {
     content: '';
     position: absolute;
-    top: 100%;
+    bottom: calc(-4px - var(--tooltip-border-width) * 1px);
     left: 50%;
-    transform: translateX(-50%);
-    border: 5px solid transparent;
-    border-top-color: var(--surface-neutral-highest);
+    width: 8px;
+    height: 8px;
+    transform: translateX(-50%) rotate(45deg);
+    background: var(--tooltip-surface);
+    border-right: var(--tooltip-border-width) solid var(--tooltip-border);
+    border-bottom: var(--tooltip-border-width) solid var(--tooltip-border);
+    z-index: -1;
   }
 
   .tooltip.bottom {
     bottom: auto;
-    top: calc(100% + 8px);
+    top: calc(100% + var(--space-8));
   }
 
   .tooltip.bottom::after {
-    top: auto;
-    bottom: 100%;
-    border-top-color: transparent;
-    border-bottom-color: var(--surface-neutral-highest);
+    bottom: auto;
+    top: calc(-4px - var(--tooltip-border-width) * 1px);
+    border-right: none;
+    border-bottom: none;
+    border-left: var(--tooltip-border-width) solid var(--tooltip-border);
+    border-top: var(--tooltip-border-width) solid var(--tooltip-border);
   }
 
-  .tooltip-wrapper:hover .tooltip {
+  .tooltip-wrapper:hover .tooltip,
+  .tooltip-wrapper.open .tooltip {
     opacity: 1;
   }
 </style>

package/src/components/types.ts

@@ -0,0 +1,51 @@
+/**
+ * Shared component-API types.
+ *
+ * These shapes back the public props of multi-action components (Notification,
+ * Dialog) so that the prop list stays small as positions are added.
+ */
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'success' | 'danger' | 'warning';
+
+/**
+ * A clickable action surfaced inside a component's chrome.
+ * Position-specific defaults (e.g. footer-right defaulting to 'primary')
+ * live in the consuming component's render block, not on this type.
+ */
+export interface ActionSpec {
+  /** Visible text. Optional when an icon-only rendering is desired. */
+  label?: string;
+  /** Font Awesome icon class (e.g. 'fas fa-check'). */
+  icon?: string;
+  /** Click handler. The component does not dispatch — caller wires the handler directly. */
+  onClick: () => void;
+  /** Visual style. Position-default applies when omitted. */
+  variant?: ButtonVariant;
+  /** Render disabled-but-visible. */
+  disabled?: boolean;
+}
+
+/**
+ * Notification's four action positions. Each is independent; any subset may be present.
+ *  - `header`: top-right pill inside the header row
+ *  - `inline`: beside the message text on a single row (replaces the description block)
+ *  - `left` / `right`: footer body-row buttons
+ */
+export interface NotificationActions {
+  header?: ActionSpec;
+  inline?: ActionSpec;
+  left?: ActionSpec;
+  right?: ActionSpec;
+}
+
+/**
+ * Dialog footer button spec. Confirm and cancel are symmetric; either may be undefined to hide.
+ * `--dialog-confirm-variant` / `--dialog-cancel-variant` config still drives the visual variant
+ * when `variant` is unset.
+ */
+export interface DialogButtonSpec {
+  label: string;
+  variant?: ButtonVariant;
+  disabled?: boolean;
+  onClick: () => void;
+}