Implement CSS custom properties and fix style inheritance through shadow DOM

[Copilot]

Tab panel content was losing inherited styles (color, font-family) when cloned into shadow DOM, resetting to browser defaults instead of respecting surrounding context.

Changes

• Added color: inherit to :host and [role="tabpanel"] to allow inherited properties to flow through shadow boundary
• Implemented 20+ documented CSS custom properties that were in JSDoc but not in actual CSS:
  • --tabbed-interface-font-family
  • --tabbed-interface-tablist-{display,gap,padding,margin,background,border}
  • --tabbed-interface-tab-{padding,background,color,border,border-radius}
  • --tabbed-interface-tab-{active,hover}-{background,color}
  • --tabbed-interface-tab-focus-outline
  • --tabbed-interface-tabpanel-{padding,background,border}

Usage

Inherited properties now flow naturally:

<style>
  .themed { color: #667eea; font-family: Georgia, serif; }
</style>
<div class="themed">
  <tabbed-interface>
    <h2>Tab 1</h2>
    <p>This inherits color and font from parent</p>
  </tabbed-interface>
</div>

Custom properties allow full customization:

tabbed-interface {
  --tabbed-interface-tab-active-background: #667eea;
  --tabbed-interface-tabpanel-padding: 2em;
}

Testing

Added test/style-inheritance.test.js with 7 tests covering inheritance behavior and custom property application. Created demo/style-inheritance.html demonstrating multiple themed examples.

All changes are backward compatible—default values match original hardcoded values.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[BUG] Styles not inheriting</issue_title>
<issue_description>## Description

Tab panels should retain te styles of the surrounding content, while still enabling authors to direct specific styles at the elements when they are in a tabpanel.

Steps to Reproduce

1. View styles before the tabepanel is created. Note backgrounds, etc.
2. View the styles on the element after being wrapped in a tabpanel and note they are browser defaults

Expected Behavior

Styles should pierce into the component

Actual Behavior

Styles are reset.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [BUG] Styles not inheriting #2

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.