Help Tooltip

<script lang="ts">
  import { InfoCircleIcon, Input, Slider, Tooltip } from '@urbicon-ui/blocks';
  // Both live beside this page; move them to $lib once more pages need them.
  import HelpTooltip from './HelpTooltip.svelte';
  import { glossary } from './glossary';

  let consumptionShare = $state(70);
  let temperature = $state(60);
</script>

<!-- Lay the blocks out in your page's own column; the width cap is the demo's. -->
<div class="w-full max-w-xl space-y-6">
  <div>
    <!-- The label row is hand-built so the trigger can sit in it. The span
         hands its text to the slider via aria-labelledby; without that the
         thumb announces itself as a bare "Slider". -->
    <div class="mb-2 flex items-center gap-1">
      <span id="consumption-share-label" class="text-text-primary text-sm font-medium">
        Consumption share
      </span>
      <HelpTooltip term={glossary['heizkv-7'].term} text={glossary['heizkv-7'].text} />
      <span class="text-text-tertiary ml-auto text-sm tabular-nums">{consumptionShare} %</span>
    </div>
    <Slider
      min={0}
      max={100}
      step={5}
      bind:value={consumptionShare}
      aria-labelledby="consumption-share-label"
    />
  </div>

  <div>
    <div class="mb-2 flex items-center gap-1">
      <label for="storage-temperature" class="text-text-primary text-sm font-medium">
        Storage temperature
      </label>
      <HelpTooltip
        term={glossary.legionella.term}
        text={glossary.legionella.text}
        intent="warning"
      />
    </div>
    <Input
      id="storage-temperature"
      type="number"
      bind:value={temperature}
      placeholder="°C"
      helper="Recommended: ≥ 60 °C"
    />
  </div>

  <!-- In running text the term itself is the trigger. It needs the tabindex to
       open on keyboard focus, which the Button gives the icon triggers for free. -->
  <p class="text-text-primary text-sm">
    System efficiency is reported via the
    <Tooltip label={glossary.jaz.text}>
      <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
      <span
        tabindex="0"
        class="text-primary border-primary/40 inline-flex cursor-help items-baseline gap-0.5 border-b border-dotted"
      >
        Jahresarbeitszahl
        <InfoCircleIcon class="h-3 w-3" />
      </span>
    </Tooltip> and values of 3.0 or higher count as energy-efficient.
  </p>

  <table class="text-text-primary w-full text-left text-sm">
    <caption class="text-text-primary pb-3 text-left text-sm font-semibold">
      Meter readings
    </caption>
    <thead class="border-border-hairline border-b">
      <tr>
        <th class="py-2 pr-4 font-medium">Apartment</th>
        <th class="py-2 pr-4 font-medium">
          <span class="inline-flex items-center gap-1">
            WMZ reading
            <HelpTooltip term={glossary.wmz.term} text={glossary.wmz.text} />
          </span>
        </th>
        <th class="py-2 font-medium">Consumption</th>
      </tr>
    </thead>
    <tbody class="divide-border-hairline divide-y">
      <tr>
        <td class="py-2 pr-4">Unit 1</td>
        <td class="py-2 pr-4 tabular-nums">12,420 kWh</td>
        <td class="py-2 tabular-nums">8,150 kWh</td>
      </tr>
      <tr>
        <td class="py-2 pr-4">Unit 2</td>
        <td class="py-2 pr-4 tabular-nums">9,880 kWh</td>
        <td class="py-2 tabular-nums">6,230 kWh</td>
      </tr>
    </tbody>
  </table>
</div>

<script lang="ts">
  import { Button, InfoCircleIcon, Tooltip } from '@urbicon-ui/blocks';

  interface Props {
    /** Definition shown in the tooltip. */
    text: string;
    /** The term being explained. It becomes the trigger's aria-label ("Explanation: HeizKV § 7"). */
    term: string;
    /** 'warning' or 'danger' for legally or safety-relevant hints. */
    intent?: 'neutral' | 'warning' | 'danger';
  }

  let { text, term, intent = 'neutral' }: Props = $props();
</script>

<Tooltip label={text} {intent}>
  <Button size="2xs" variant="ghost" aria-label="Explanation: {term}">
    <InfoCircleIcon class="h-3.5 w-3.5" />
  </Button>
</Tooltip>

export const glossary = {
  'heizkv-7': {
    term: 'HeizKV § 7',
    text: 'The German Heating Costs Ordinance requires that 50% to 70% of heating costs are billed by consumption. The rest is allocated by living area.'
  },
  jaz: {
    term: 'Jahresarbeitszahl (JAZ)',
    text: 'Seasonal performance factor: heat energy delivered per kWh of electricity, averaged over the whole year. A JAZ of 3.5 turns 1 kWh of electricity into 3.5 kWh of heat.'
  },
  legionella: {
    term: 'Legionella protection',
    text: 'In central hot-water systems the storage temperature must stay at 60 °C or above to prevent legionella growth (Drinking Water Ordinance, TrinkwV § 14).'
  },
  wmz: {
    term: 'Wärmemengenzähler (WMZ)',
    text: 'Heat meter: measures the heat energy delivered, in kWh. Mandatory in multi-unit buildings, so heating and hot water can be billed to each apartment by actual use.'
  }
} as const;

export type GlossaryKey = keyof typeof glossary;