daisyui | ️ ️ ️ ️ ️ Tailwind Components | User Interface library

1. Where is the code/how does the --value css variable keep decrementing purely in css?

It's not purely in CSS. It's done in JS.
If you read the countdown doc you've provided, you'll see this sentence:

You need to change to --value CSS variable using JS. Value must be a number between 0 and 99

I believe that they are using svelte on their website.

1. In the countdown.css, on the content: line what does \A denote? It looks like it denotes a new line from the output but... never seen that before

The \A injects a line break. You can find more info in the W3 specs.
To make it work, you will need white-space: pre;:

pre
Sequences of white space are preserved. Lines are only broken at newline characters in the source and at
elements.

You can add the class like you do on the button

im just doing a new project and stumbled upon this pretty randomly. It works for me and i noticed a difference in your config.content[]: while yours says html,js, mine says html,ts:

The idea behind the solution is to separate the navbar and drawer into different components and use store writable() (global variable to which a component can "subscribe to" in order to listen for changes and, in this case, modify as well) in conjuction with the class directive to apply different style classes to different elements for when opening and closing the drawer.

[The follwoing solution can also be implemented in other frameworks such as VueJS or even using vanilla JavaScript.]

Tools:

• Svelte / SvelteKit (in this case)
• TailWindCSS
• DaisyUI (requires TailWindCSS)

I tried a few other possible solutions (in some of them without even using an overlay element) but I always ended up running into one of the following problems, among others:

• The drawer component would go behind the navigation bar when closing.
• The element marked as overlay's opacity or background-color would not trigger when transitioning upon closing (it would just skip to "0" because of the way the drawer container was being hidden).
• The drawer and the element marked as drawer container had to both have opacity reduction upon closing transition. (This ended up looking fine, which is the first solution I came up with, but I wanted to get closer to the original visual transitions of DaisyUI.)
• Sometimes the transitions would only work properly for either a "sticky" navigation bar or a normal one, but never both at the same time.

• The code below supports "sticky" navigation bars and normal ones (e.g. like the ones in the Navbar section of DaisyUI).
• Scrolling is enabled while the drawer is showing.
• You might also be able to do this using eventDispatcher, but I would recommend checking out Event forwarding with dispatcher vs passing in handling function, which is best practice? before doing so.

stores.js:

Here you can read that daisyUI adds a few base styles if base is true in the tailwind.config.js file. Thus, I had to set base to false to solve my problem:

You have to add the specific colors you need, available from the TailwindCSS palette, inside your tailwind.config.js file like so:

tailwind.config.js