Control panel styles and parts

[mirisuzanne]

Related Issue(s)

Reminder to add related issue(s), if available.

• The control-panel should be fully replaceable #9
• Feature: Provide a default theme #5

I provided some basic styles for the control panel, but they could be improved. I'm also not sure if we want to make the entire panel replaceable, or if it's enough to replace the controls inside the panel. I suppose the advantage of replaceing the entire panel is that it could be more easily styled by the page.

[netlify]

✅ Deploy Preview for slide-deck ready!

Name	Link
🔨 Latest commit	5f74602
🔍 Latest deploy log	https://app.netlify.com/sites/slide-deck/deploys/6596d001d5e9e20008935a74
😎 Deploy Preview	https://deploy-preview-10--slide-deck.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[mirisuzanne]

@stacyk this isn't ready for a final review, but I could use your feedback on it before going further.

[mirisuzanne]

Discussion this morning:

• Make the entire control panel replaceable
• Expose button parts for light dom style
• Provide some default styles in the light dom css theme

[mirisuzanne]

@jamesnw @jerivas @stacyk This should be ready for review, and makes some of the changes we discussed this morning. The separate slide-canvas/slide-note bits are part of #11 - which we can clean up once this is merged.

[stacyk]

I'm just starting to look at this PR, but we have some issues in Safari. I'll keep poking around but wanted to post this in case you had any ideas what is happening here @mirisuzanne.

[stacyk]

@mirisuzanne Maybe we can use Auto-fill instead?

[jamesnw]

I like this! I needed to make some minor adjustments to get the control panel working- you can see those changes in 5958c3a

Notably-

• I needed to set this.controlPanel to the slotted element, falling back to the shadow dom
• I changed the slideCount from this.childElementCount to this.querySelectorAll(':scope > :not([slot])').length

I also added an example, which is fairly barebones at this point. We probably also want to document this in the README?

[mirisuzanne]

@stacyk I think auto-fill works ok for this. That seems to be a known Safari bug with auto-fit and containers (If you remove the container property on slide-deck, it works fine):

https://bugs.webkit.org/show_bug.cgi?id=256047

[jamesnw]

🚀