Add nonce support

components/css/colors.templ

@@ -4,7 +4,7 @@ var cssColorsHandle = templ.NewOnceHandle()
 
 templ GoasterCSSColors() {
 	@cssColorsHandle.Once() {
-		<style type="text/css">
+		<style type="text/css" nonce={ templ.GetNonce(ctx) }>
 /* [tempo] BEGIN - Do not edit! This section is auto-generated. */
 :root{--_gtt-color-space: var(--gtt-color-space, oklab);--_gtt-color-default-base: var( --gtt-color-default-base, oklch(.554 .046 257.417) );--gtt-color-default-lightest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-default-base) 10%, white );--gtt-color-default-lighter: color-mix( in var(--_gtt-color-space), var(--_gtt-color-default-base) 30%, white );--gtt-color-default-light: color-mix( in var(--_gtt-color-space), var(--_gtt-color-default-base) 70%, white );--gtt-color-default-dark: color-mix( in var(--_gtt-color-space), var(--_gtt-color-default-base) 70%, black );--gtt-color-default-darker: color-mix( in var(--_gtt-color-space), var(--_gtt-color-default-base) 30%, black );--gtt-color-default-darkest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-default-base) 10%, black );--_gtt-color-success-base: var( --gtt-color-success-base, oklch(.723 .219 149.579) );--gtt-color-success-lightest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-success-base) 10%, white );--gtt-color-success-lighter: color-mix( in var(--_gtt-color-space), var(--_gtt-color-success-base) 30%, white );--gtt-color-success-light: color-mix( in var(--_gtt-color-space), var(--_gtt-color-success-base) 70%, white );--gtt-color-success-dark: color-mix( in var(--_gtt-color-space), var(--_gtt-color-success-base) 70%, black );--gtt-color-success-darker: color-mix( in var(--_gtt-color-space), var(--_gtt-color-success-base) 30%, black );--gtt-color-success-darkest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-success-base) 10%, black );--_gtt-color-error-base: var( --gtt-color-error-base, oklch(.637 .237 25.331) );--gtt-color-error-lightest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-error-base) 10%, white );--gtt-color-error-lighter: color-mix( in var(--_gtt-color-space), var(--_gtt-color-error-base) 30%, white );--gtt-color-error-light: color-mix( in var(--_gtt-color-space), var(--_gtt-color-error-base) 70%, white );--gtt-color-error-dark: color-mix( in var(--_gtt-color-space), var(--_gtt-color-error-base) 70%, black );--gtt-color-error-darker: color-mix( in var(--_gtt-color-space), var(--_gtt-color-error-base) 30%, black );--gtt-color-error-darkest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-error-base) 10%, black );--_gtt-color-warning-base: var( --gtt-color-warning-base, oklch(.769 .188 70.08) );--gtt-color-warning-lightest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-warning-base) 10%, white );--gtt-color-warning-lighter: color-mix( in var(--_gtt-color-space), var(--_gtt-color-warning-base) 30%, white );--gtt-color-warning-light: color-mix( in var(--_gtt-color-space), var(--_gtt-color-warning-base) 70%, white );--gtt-color-warning-dark: color-mix( in var(--_gtt-color-space), var(--_gtt-color-warning-base) 70%, black );--gtt-color-warning-darker: color-mix( in var(--_gtt-color-space), var(--_gtt-color-warning-base) 30%, black );--gtt-color-warning-darkest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-warning-base) 10%, black );--_gtt-color-info-base: var( --gtt-color-info-base, oklch(.623 .214 259.815) );--gtt-color-info-lightest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-info-base) 10%, white );--gtt-color-info-lighter: color-mix( in var(--_gtt-color-space), var(--_gtt-color-info-base) 30%, white );--gtt-color-info-light: color-mix( in var(--_gtt-color-space), var(--_gtt-color-info-base) 70%, white );--gtt-color-info-dark: color-mix( in var(--_gtt-color-space), var(--_gtt-color-info-base) 70%, black );--gtt-color-info-darker: color-mix( in var(--_gtt-color-space), var(--_gtt-color-info-base) 30%, black );--gtt-color-info-darkest: color-mix( in var(--_gtt-color-space), var(--_gtt-color-info-base) 10%, black )}
 

components/css/styles.templ

@@ -10,7 +10,7 @@ var cssHandle = templ.NewOnceHandle()
 
 templ GoasterCSS(variant string) {
 	@cssHandle.Once() {
-		<style type="text/css">
+		<style type="text/css" nonce={ templ.GetNonce(ctx) }>
     /* [tempo] BEGIN - Do not edit! This section is auto-generated. */
 *{box-sizing:border-box;border-width:0;border-style:solid}:root{--_gtt-px: var(--gtt-px, .75em);--_gtt-py: var(--gtt-py, 0);--_gtt-border-width: var(--gtt-border-width, 1px);--_gtt-border-style: var(--gtt-border-style, solid);--_gtt-border-radius: var(--gtt-border-radius, .375rem);--_gtt-border-color: var(--gtt-border-color, var(--gtt-default-border-color));--_gtt-font-family: var(--gtt-font-family, inherit);--_gtt-font-size: var(--gtt-font-size, 1rem);--_gtt-line-height: var(--gtt-line-height, 1rem);--_gtt-color: var(--gtt-color, var(--gtt-default-color));--_gtt-bg: var(--gtt-bg, var(--gtt-default-bg));--_gtt-progress-color: var( --gtt-progress-color, var(--gtt-default-progress-bar-color) );--gtt-default-bg: var(--gtt-color-default-lightest);--gtt-default-color: var(--gtt-color-default-dark);--gtt-default-border-color: var(--gtt-color-default-lighter);--gtt-default-progress-bar-color: var(--gtt-color-default-light);--gtt-success-bg: var(--gtt-color-success-lightest);--gtt-success-color: var(--gtt-color-success-dark);--gtt-success-border-color: var(--gtt-color-success-lighter);--gtt-success-progress-bar-color: var(--gtt-color-success-light);--gtt-error-bg: var(--gtt-color-error-lightest);--gtt-error-color: var(--gtt-color-error-dark);--gtt-error-border-color: var(--gtt-color-error-lighter);--gtt-error-progress-bar-color: var(--gtt-color-error-light);--gtt-warning-bg: var(--gtt-color-warning-lightest);--gtt-warning-color: var(--gtt-color-warning-dark);--gtt-warning-border-color: var(--gtt-color-warning-lighter);--gtt-warning-progress-bar-color: var(--gtt-color-warning-light);--gtt-info-bg: var(--gtt-color-info-lightest);--gtt-info-color: var(--gtt-color-info-dark);--gtt-info-border-color: var(--gtt-color-info-lighter);--gtt-info-progress-bar-color: var(--gtt-color-info-light);--_gtt-anim-name-in-top: var(--gtt-anim-name-in-top, gttFadeInDown);--_gtt-anim-name-in-bottom: var(--gtt-anim-name-in-bottom, gttFadeInUp);--_gtt-anim-delay-in: var(--gtt-anim-delay-in, 0s);--_gtt-anim-duration-in: var(--gtt-anim-duration-in, .5s);--_gtt-anim-direction-in: var(--gtt-anim-direction-in, normal);--_gtt-anim-timing-in: var(--gtt-anim-timing-in, ease);--_gtt-anim-name-out-top: var(--gtt-anim-name-out-top, gttFadeOutUp);--_gtt-anim-name-out-bottom: var(--gtt-anim-name-out-bottom, gttFadeOutDown);--_gtt-anim-delay-out: var(--gtt-anim-delay-out, 0s);--_gtt-anim-duration-out: var(--gtt-anim-duration-out, .5s);--_gtt-anim-direction-out: (--gtt-anim-direction-out, normal);--_gtt-anim-timing-out: var(--gtt-anim-timing-out, ease)}.gttContainer{position:fixed;z-index:1000;display:flex;flex-direction:column-reverse;align-items:flex-end;max-height:90%;overflow-y:auto;font-family:var(--_gtt-font-family);font-size:var(--_gtt-font-size);line-height:var(--_gtt-line-height)}.gttContainer[data-position=bottom-right]{right:15px;bottom:15px;align-items:flex-end}.gttContainer[data-position=bottom-left]{left:15px;bottom:15px;align-items:flex-start}.gttContainer[data-position=bottom-center]{left:50%;bottom:15px;transform:translate(-50%);align-items:center}.gttContainer[data-position=top-right]{right:15px;top:15px;align-items:flex-end}.gttContainer[data-position=top-left]{left:15px;top:15px;align-items:flex-start}.gttContainer[data-position=top-center]{left:50%;top:15px;transform:translate(-50%);align-items:center}.gttToast{position:relative;min-width:250px;margin-top:.5rem;padding:var(--_gtt-py) var(--_gtt-px);display:flex;align-items:center;justify-content:space-between;background-color:var(--_gtt-bg);color:var(--_gtt-color);border-color:var(--_gtt-border-color)}.gttToast[role=alert][data-level=default]{--_gtt-color: var(--gtt-default-color);--_gtt-bg: var(--gtt-default-bg);--_gtt-border-color: var(--gtt-default-border-color);--_gtt-progress-color: var(--gtt-default-progress-bar-color)}.gttToast[role=alert][data-level=success]{--_gtt-color: var(--gtt-success-color);--_gtt-bg: var(--gtt-success-bg);--_gtt-border-color: var(--gtt-success-border-color);--_gtt-progress-color: var(--gtt-success-progress-bar-color)}.gttToast[role=alert][data-level=error]{--_gtt-color: var(--gtt-error-color);--_gtt-bg: var(--gtt-error-bg);--_gtt-border-color: var(--gtt-error-border-color);--_gtt-progress-color: var(--gtt-error-progress-bar-color)}.gttToast[role=alert][data-level=warning]{--_gtt-color: var(--gtt-warning-color);--_gtt-bg: var(--gtt-warning-bg);--_gtt-border-color: var(--gtt-warning-border-color);--_gtt-progress-color: var(--gtt-warning-progress-bar-color)}.gttToast[role=alert][data-level=info]{--_gtt-color: var(--gtt-info-color);--_gtt-bg: var(--gtt-info-bg);--_gtt-border-color: var(--gtt-info-border-color);--_gtt-progress-color: var(--gtt-info-progress-bar-color)}.gttToast[role=alert][data-rounded=true]{border-radius:var(--_gtt-border-radius)}.gttToast[role=alert][data-bordered=true]{border-style:var(--_gtt-border-style);border-width:var(--_gtt-border-width)}button.gttCloseBtn{margin-left:auto;display:inline-flex;align-items:center;background-color:transparent;border:none;border-radius:1e5px;aspect-ratio:1;color:inherit;cursor:pointer;transition:background .3s cubic-bezier(.4,0,.2,1)}button.gttCloseBtn:hover,button.gttCloseBtn:focus{background-color:var(--_gtt-border-color)}.gttProgressBar{position:absolute;overflow:hidden;top:0;left:0;height:4px;background-color:var(--_gtt-progress-color);width:100%;transition:width linear}.gttIcon{display:inline-flex;align-items:center;flex-shrink:0;width:1.125rem;height:1.125rem}.gttMessage{margin:1em 0 1em .75em}.gttToast[data-animation=true]{animation-duration:var(--_gtt-anim-duration-in);animation-direction:var(--_gtt-anim-direction-in);animation-timing-function:var(--_gtt-anim-timing-in);animation-delay:var(--_gtt-anim-delay-in)}.gttClose{animation-duration:var(--_gtt-anim-duration-out);animation-timing-function:var(--_gtt-anim-timing-out);animation-delay:var(--_gtt-anim-delay-out);animation-direction:var(--_gtt-anim-direction-out)}.gttToast[data-animation=true].gttShowFromTop{animation-name:var(--_gtt-anim-name-in-top)}.gttToast[data-animation=true].gttShowFromBottom{animation-name:var(--_gtt-anim-name-in-bottom)}.gttCloseFromTop{animation-name:var(--_gtt-anim-name-out-top)}.gttCloseFromBottom{animation-name:var(--_gtt-anim-name-out-bottom)}.gttShow{visibility:visible}.gttSrOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@keyframes gttFadeInUp{0%{transform:translate3d(0,100%,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes gttFadeInDown{0%{transform:translate3d(0,-100%,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes gttFadeOutUp{0%{opacity:1}to{transform:translate3d(0,-100%,0);opacity:0}}@keyframes gttFadeOutDown{0%{opacity:1}to{transform:translate3d(0,100%,0);opacity:0}}