@authhero/widget 0.2.2 → 0.4.0

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-D0xitTOL.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["authhero-node.cjs",[[513,"authhero-node",{"component":[16],"value":[1],"disabled":[4]}]]],["authhero-widget.cjs",[[513,"authhero-widget",{"screen":[1],"apiUrl":[1,"api-url"],"branding":[1],"theme":[1],"loading":[1028],"autoSubmit":[4,"auto-submit"],"_screen":[32],"_branding":[32],"_theme":[32],"formData":[32]},null,{"screen":[{"watchScreen":0}],"branding":[{"watchBranding":0}],"theme":[{"watchTheme":0}]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    "components/authhero-widget/authhero-widget.js",
+    "components/authhero-node/authhero-node.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.41.0",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/authhero-node/authhero-node.css

@@ -0,0 +1,298 @@
+/**
+ * AuthHero Node Component Styles
+ * 
+ * Uses CSS custom properties from themes/variables.css
+ * Exposes CSS parts for external styling via ::part()
+ */
+
+:host {
+  display: block;
+}
+
+/* ==========================================================================
+   Input Wrapper
+   Part: input-wrapper
+   ========================================================================== */
+
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ah-space-1, 0.25rem);
+}
+
+/* ==========================================================================
+   Labels
+   Part: label
+   ========================================================================== */
+
+.input-label {
+  font-size: var(--ah-font-size-sm, 0.875rem);
+  font-weight: var(--ah-font-weight-medium, 500);
+  color: var(--ah-color-text-label, #374151);
+  line-height: var(--ah-line-height-normal, 1.5);
+}
+
+.required {
+  color: var(--ah-color-error, #dc2626);
+  margin-left: var(--ah-space-1, 0.25rem);
+}
+
+/* ==========================================================================
+   Text Inputs
+   Part: input
+   ========================================================================== */
+
+.input-field {
+  padding: var(--ah-input-padding-y, 0.75rem) var(--ah-input-padding-x, 1rem);
+  font-size: var(--ah-font-size-base, 1rem);
+  font-family: inherit;
+  color: var(--ah-color-text, #1f2937);
+  background-color: var(--ah-color-bg, #ffffff);
+  border: var(--ah-input-border-width, 1px) solid var(--ah-color-border, #d1d5db);
+  border-radius: var(--ah-input-radius, 6px);
+  outline: none;
+  transition: border-color var(--ah-transition-base, 200ms ease),
+              box-shadow var(--ah-transition-base, 200ms ease);
+}
+
+.input-field::placeholder {
+  color: var(--ah-color-text-muted, #9ca3af);
+}
+
+.input-field:focus {
+  border-color: var(--ah-color-primary, #0066cc);
+  box-shadow: 0 0 0 3px var(--ah-color-primary-focus-ring, rgba(0, 102, 204, 0.1));
+}
+
+.input-field.has-error {
+  border-color: var(--ah-color-error, #dc2626);
+}
+
+.input-field.has-error:focus {
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+}
+
+.input-field:disabled {
+  background-color: var(--ah-color-bg-disabled, #f3f4f6);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+/* ==========================================================================
+   Helper & Error Text
+   Part: helper-text, error-text
+   ========================================================================== */
+
+.error-text {
+  font-size: var(--ah-font-size-xs, 0.75rem);
+  color: var(--ah-color-error, #dc2626);
+  margin-top: var(--ah-space-1, 0.25rem);
+}
+
+.helper-text {
+  font-size: var(--ah-font-size-xs, 0.75rem);
+  color: var(--ah-color-text-muted, #6b7280);
+  margin-top: var(--ah-space-1, 0.25rem);
+}
+
+/* ==========================================================================
+   Checkbox
+   Part: checkbox, checkbox-label
+   ========================================================================== */
+
+.checkbox-wrapper {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ah-space-2, 0.5rem);
+  cursor: pointer;
+}
+
+.checkbox-wrapper input[type='checkbox'] {
+  width: 1rem;
+  height: 1rem;
+  margin-top: 0.125rem;
+  accent-color: var(--ah-color-primary, #0066cc);
+  cursor: pointer;
+}
+
+.checkbox-label {
+  font-size: var(--ah-font-size-sm, 0.875rem);
+  color: var(--ah-color-text-label, #374151);
+  line-height: var(--ah-line-height-normal, 1.5);
+}
+
+/* ==========================================================================
+   Buttons
+   Part: button, button-primary, button-secondary
+   ========================================================================== */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ah-space-2, 0.5rem);
+  width: 100%;
+  padding: var(--ah-btn-padding-y, 0.875rem) var(--ah-btn-padding-x, 1.5rem);
+  font-size: var(--ah-font-size-base, 1rem);
+  font-weight: var(--ah-btn-font-weight, 500);
+  font-family: inherit;
+  line-height: var(--ah-line-height-tight, 1.25);
+  text-align: center;
+  text-decoration: none;
+  border: none;
+  border-radius: var(--ah-btn-radius, 8px);
+  cursor: pointer;
+  transition: background-color var(--ah-transition-base, 200ms ease),
+              transform var(--ah-transition-fast, 150ms ease),
+              box-shadow var(--ah-transition-base, 200ms ease);
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.btn:not(:disabled):active {
+  transform: scale(0.98);
+}
+
+.btn:focus-visible {
+  outline: 2px solid var(--ah-color-primary, #0066cc);
+  outline-offset: 2px;
+}
+
+/* Primary Button */
+.btn-primary {
+  background-color: var(--ah-color-primary, #0066cc);
+  color: var(--ah-color-text-on-primary, #ffffff);
+}
+
+.btn-primary:not(:disabled):hover {
+  background-color: var(--ah-color-primary-hover, #0052a3);
+}
+
+/* Secondary Button (OIDC/Social) */
+.btn-secondary {
+  background-color: var(--ah-color-bg, #ffffff);
+  color: var(--ah-color-text, #374151);
+  border: 1px solid var(--ah-color-border-muted, #e5e7eb);
+}
+
+.btn-secondary:not(:disabled):hover {
+  background-color: var(--ah-color-bg-muted, #f9fafb);
+  border-color: var(--ah-color-border, #d1d5db);
+}
+
+/* ==========================================================================
+   Text Content
+   Part: text-title, text-description
+   ========================================================================== */
+
+.text-title {
+  font-size: var(--ah-font-size-xl, 1.25rem);
+  font-weight: var(--ah-font-weight-semibold, 600);
+  color: var(--ah-color-text, #1f2937);
+  margin: var(--ah-space-2, 0.5rem) 0;
+  line-height: var(--ah-line-height-tight, 1.25);
+}
+
+.text-title.text-success {
+  color: var(--ah-color-success, #16a34a);
+}
+
+.text-description {
+  font-size: var(--ah-font-size-sm, 0.875rem);
+  color: var(--ah-color-text-muted, #6b7280);
+  margin: var(--ah-space-1, 0.25rem) 0;
+  line-height: var(--ah-line-height-normal, 1.5);
+}
+
+/* ==========================================================================
+   Images
+   Part: image
+   ========================================================================== */
+
+.image {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--ah-radius-lg, 8px);
+}
+
+.image-centered {
+  margin: 0 auto var(--ah-space-4, 1rem);
+  width: var(--ah-logo-size, 48px);
+  height: var(--ah-logo-size, 48px);
+  object-fit: contain;
+}
+
+/* ==========================================================================
+   Links
+   Part: link
+   ========================================================================== */
+
+.link {
+  color: var(--ah-color-primary, #0066cc);
+  text-decoration: none;
+  font-size: var(--ah-font-size-sm, 0.875rem);
+  transition: color var(--ah-transition-fast, 150ms ease);
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.link:focus-visible {
+  outline: 2px solid var(--ah-color-primary, #0066cc);
+  outline-offset: 2px;
+}
+
+/* ==========================================================================
+   Messages / Alerts
+   Part: message, message-error, message-success
+   ========================================================================== */
+
+.node-error {
+  padding: var(--ah-space-3, 0.75rem) var(--ah-space-4, 1rem);
+  background-color: var(--ah-color-error-bg, #fee2e2);
+  color: var(--ah-color-error, #dc2626);
+  border: 1px solid var(--ah-color-error-border, #fecaca);
+  border-radius: var(--ah-radius-md, 6px);
+  font-size: var(--ah-font-size-sm, 0.875rem);
+}
+
+.node-success {
+  padding: var(--ah-space-3, 0.75rem) var(--ah-space-4, 1rem);
+  background-color: var(--ah-color-success-bg, #dcfce7);
+  color: var(--ah-color-success, #16a34a);
+  border: 1px solid var(--ah-color-success-border, #bbf7d0);
+  border-radius: var(--ah-radius-md, 6px);
+  font-size: var(--ah-font-size-sm, 0.875rem);
+}
+
+/* ==========================================================================
+   Divider
+   Part: divider
+   ========================================================================== */
+
+.divider {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin: var(--ah-space-4, 1rem) 0;
+}
+
+.divider::before,
+.divider::after {
+  content: '';
+  flex: 1;
+  border-bottom: 1px solid var(--ah-color-border-muted, #e5e7eb);
+}
+
+.divider-text {
+  padding: 0 var(--ah-space-4, 1rem);
+  font-size: var(--ah-font-size-sm, 0.875rem);
+  color: var(--ah-color-text-muted, #9ca3af);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}