@corti/dictation-web 0.3.0-rc → 0.4.0-rc

package/dist/stories/settings-menu.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-menu.stories.js","sourceRoot":"","sources":["../../stories/settings-menu.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from \"@storybook/addon-actions\";\nimport { html, type TemplateResult } from \"lit\";\n\nimport \"../src/components/settings-menu.js\";\nimport \"../src/contexts/dictation-context.js\";\n\nexport default {\n  component: \"settings-menu\",\n  title: \"SettingsMenu\",\n};\n\ninterface Story<T> {\n  (args: T): TemplateResult;\n  args?: Partial<T>;\n  argTypes?: Record<string, unknown>;\n}\n\ntype StoryArgs = Record<string, never>;\n\nexport const DefaultValues: Story<StoryArgs> = () => {\n  return html`\n    <dictation-context-provider>\n      <settings-menu\n        @languages-changed=${action(\"languages-changed\")}\n        @recording-devices-changed=${action(\"recording-devices-changed\")}\n        @ready=${action(\"ready\")}\n        @error=${action(\"error\")}\n      ></settings-menu>\n    </dictation-context-provider>\n  `;\n};\n\nexport const DisabledSettings: Story<StoryArgs> = () => {\n  return html`\n    <dictation-context-provider recordingState=\"recording\">\n      <settings-menu\n        @languages-changed=${action(\"languages-changed\")}\n        @recording-devices-changed=${action(\"recording-devices-changed\")}\n        @ready=${action(\"ready\")}\n        @error=${action(\"error\")}\n      ></settings-menu>\n    </dictation-context-provider>\n  `;\n};\n\nexport const OnlyDeviceSelector: Story<StoryArgs> = () => {\n  return html`\n    <dictation-context-provider>\n      <settings-menu\n        settingsEnabled=\"device\"\n        @languages-changed=${action(\"languages-changed\")}\n        @recording-devices-changed=${action(\"recording-devices-changed\")}\n        @ready=${action(\"ready\")}\n        @error=${action(\"error\")}\n      ></settings-menu>\n    </dictation-context-provider>\n  `;\n};\n\nexport const OnlyLanguageSelector: Story<StoryArgs> = () => {\n  return html`\n    <dictation-context-provider>\n      <settings-menu\n        .settingsEnabled=${[\"language\"]}\n        @languages-changed=${action(\"languages-changed\")}\n        @recording-devices-changed=${action(\"recording-devices-changed\")}\n        @ready=${action(\"ready\")}\n        @error=${action(\"error\")}\n      ></settings-menu>\n    </dictation-context-provider>\n  `;\n};\n\nexport const NoSettings: Story<StoryArgs> = () => {\n  return html`\n    <dictation-context-provider>\n      <settings-menu\n        .settingsEnabled=${[]}\n        @languages-changed=${action(\"languages-changed\")}\n        @recording-devices-changed=${action(\"recording-devices-changed\")}\n        @ready=${action(\"ready\")}\n        @error=${action(\"error\")}\n      ></settings-menu>\n    </dictation-context-provider>\n  `;\n};\n\nexport const WithCustomLanguages: Story<StoryArgs> = () => {\n  return html`\n    <dictation-context-provider .languages=${[\"en\", \"es\", \"fr\", \"de\", \"it\"]}>\n      <settings-menu\n        settingsEnabled=\"language\"\n        @languages-changed=${action(\"languages-changed\")}\n        @recording-devices-changed=${action(\"recording-devices-changed\")}\n        @ready=${action(\"ready\")}\n        @error=${action(\"error\")}\n      ></settings-menu>\n    </dictation-context-provider>\n  `;\n};\n\nexport const WithLanguagesAttribute: Story<StoryArgs> = () => {\n  return html`\n    <dictation-context-provider languages=\"en,da,es,fr\">\n      <settings-menu\n        settingsEnabled=\"language\"\n        @languages-changed=${action(\"languages-changed\")}\n        @recording-devices-changed=${action(\"recording-devices-changed\")}\n        @ready=${action(\"ready\")}\n        @error=${action(\"error\")}\n      ></settings-menu>\n    </dictation-context-provider>\n  `;\n};\n\nexport const WithCustomDevices: Story<StoryArgs> = () => {\n  const customDevices: MediaDeviceInfo[] = [\n    {\n      deviceId: \"device1\",\n      groupId: \"group1\",\n      kind: \"audioinput\",\n      label: \"Built-in Microphone\",\n      toJSON: () => ({}),\n    },\n    {\n      deviceId: \"device2\",\n      groupId: \"group2\",\n      kind: \"audioinput\",\n      label: \"External USB Microphone\",\n      toJSON: () => ({}),\n    },\n  ];\n\n  return html`\n    <dictation-context-provider .devices=${customDevices}>\n      <settings-menu\n        settingsEnabled=\"device\"\n        @languages-changed=${action(\"languages-changed\")}\n        @recording-devices-changed=${action(\"recording-devices-changed\")}\n        @ready=${action(\"ready\")}\n        @error=${action(\"error\")}\n      ></settings-menu>\n    </dictation-context-provider>\n  `;\n};\n\nexport const BothWithCustomOptions: Story<StoryArgs> = () => {\n  const customDevices: MediaDeviceInfo[] = [\n    {\n      deviceId: \"device1\",\n      groupId: \"group1\",\n      kind: \"audioinput\",\n      label: \"Headset Microphone\",\n      toJSON: () => ({}),\n    },\n    {\n      deviceId: \"device2\",\n      groupId: \"group2\",\n      kind: \"audioinput\",\n      label: \"Desk Microphone\",\n      toJSON: () => ({}),\n    },\n  ];\n\n  return html`\n    <dictation-context-provider languages=\"en,fr,de\" .devices=${customDevices}>\n      <settings-menu\n        settingsEnabled=\"device,language\"\n        @languages-changed=${action(\"languages-changed\")}\n        @recording-devices-changed=${action(\"recording-devices-changed\")}\n        @ready=${action(\"ready\")}\n        @error=${action(\"error\")}\n      ></settings-menu>\n    </dictation-context-provider>\n  `;\n};\n"]}

package/dist/styles/ComponentStyles.js

@@ -1,11 +1,11 @@
 import { css } from 'lit';
 const ComponentStyles = css `
   .wrapper {
-    background-color: var(--card-background);
-    border: 1px solid var(--card-border-color);
-    border-radius: var(--card-border-radius);
-    box-shadow: var(--card-box-shadow);
-    padding: var(--card-padding);
+    background-color: var(--card-background, light-dark(#fff, #333));
+    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));
+    border-radius: var(--card-border-radius, 8px);
+    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));
+    padding: var(--card-padding, 4px);
     display: flex;
     gap: 4px;
     height: 46px;
@@ -13,40 +13,6 @@ const ComponentStyles = css `
     box-sizing: border-box;
     overflow: hidden;
   }
-  h2 {
-    margin: 0 0 10px;
-    font-size: 1rem;
-    font-weight: 500;
-  }
-  label {
-    font-size: 0.9rem;
-    margin-right: 8px;
-  }
-  select {
-    padding: 4px 6px;
-    font-size: 0.9rem;
-    border: 1px solid var(--card-border-color);
-    border-radius: 4px;
-    background-color: var(--card-background);
-    color: inherit;
-  }
-
-  .visualiser {
-    width: 16px;
-    height: 100%;
-    background: var(--visualiser-background);
-    margin-top: 8px;
-    border-radius: 5px;
-    overflow: hidden;
-    display: flex;
-    align-items: flex-end;
-  }
-  .level {
-    height: 100%;
-    width: 100%;
-    background: var(--visualiser-level-color);
-    transition: width 0.1s ease-in-out;
-  }
 `;
 export default ComponentStyles;
 //# sourceMappingURL=ComponentStyles.js.map

package/dist/styles/ComponentStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentStyles.js","sourceRoot":"","sources":["../../src/styles/ComponentStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD1B,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst ComponentStyles = css`\n  .wrapper {\n    background-color: var(--card-background);\n    border: 1px solid var(--card-border-color);\n    border-radius: var(--card-border-radius);\n    box-shadow: var(--card-box-shadow);\n    padding: var(--card-padding);\n    display: flex;\n    gap: 4px;\n    height: 46px;\n    width: fit-content;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n  h2 {\n    margin: 0 0 10px;\n    font-size: 1rem;\n    font-weight: 500;\n  }\n  label {\n    font-size: 0.9rem;\n    margin-right: 8px;\n  }\n  select {\n    padding: 4px 6px;\n    font-size: 0.9rem;\n    border: 1px solid var(--card-border-color);\n    border-radius: 4px;\n    background-color: var(--card-background);\n    color: inherit;\n  }\n\n  .visualiser {\n    width: 16px;\n    height: 100%;\n    background: var(--visualiser-background);\n    margin-top: 8px;\n    border-radius: 5px;\n    overflow: hidden;\n    display: flex;\n    align-items: flex-end;\n  }\n  .level {\n    height: 100%;\n    width: 100%;\n    background: var(--visualiser-level-color);\n    transition: width 0.1s ease-in-out;\n  }\n`;\n\nexport default ComponentStyles;\n"]}
+{"version":3,"file":"ComponentStyles.js","sourceRoot":"","sources":["../../src/styles/ComponentStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAc1B,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst ComponentStyles = css`\n  .wrapper {\n    background-color: var(--card-background, light-dark(#fff, #333));\n    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));\n    border-radius: var(--card-border-radius, 8px);\n    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));\n    padding: var(--card-padding, 4px);\n    display: flex;\n    gap: 4px;\n    height: 46px;\n    width: fit-content;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n`;\n\nexport default ComponentStyles;\n\n"]}

package/dist/styles/audio-visualiser.d.ts

@@ -0,0 +1,2 @@
+declare const AudioVisualiserStyles: import("lit").CSSResult;
+export default AudioVisualiserStyles;

package/dist/styles/audio-visualiser.js

@@ -0,0 +1,33 @@
+import { css } from "lit";
+const AudioVisualiserStyles = css `
+  :host {
+    height: 100%;
+  }
+
+  .container {
+    display: flex;
+    width: 8px;
+    flex-direction: column-reverse; /* Bottom-up stacking */
+    height: 100%;
+    gap: 1px;
+    opacity: 0.5;
+
+    &.active {
+      opacity: 1;
+    }
+  }
+
+  .segment {
+    flex: 1;
+    background-color: var(--action-accent-text-color, light-dark(#fff, #fff));
+    transition: background-color 0.25s;
+    border-radius: 1px;
+    opacity: 0.5;
+  }
+
+  .segment.active {
+    opacity: 1;
+  }
+`;
+export default AudioVisualiserStyles;
+//# sourceMappingURL=audio-visualiser.js.map

package/dist/styles/audio-visualiser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio-visualiser.js","sourceRoot":"","sources":["../../src/styles/audio-visualiser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BhC,CAAC;AAEF,eAAe,qBAAqB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nconst AudioVisualiserStyles = css`\n  :host {\n    height: 100%;\n  }\n\n  .container {\n    display: flex;\n    width: 8px;\n    flex-direction: column-reverse; /* Bottom-up stacking */\n    height: 100%;\n    gap: 1px;\n    opacity: 0.5;\n\n    &.active {\n      opacity: 1;\n    }\n  }\n\n  .segment {\n    flex: 1;\n    background-color: var(--action-accent-text-color, light-dark(#fff, #fff));\n    transition: background-color 0.25s;\n    border-radius: 1px;\n    opacity: 0.5;\n  }\n\n  .segment.active {\n    opacity: 1;\n  }\n`;\n\nexport default AudioVisualiserStyles;\n\n"]}

package/dist/styles/buttons.js

@@ -1,57 +1,50 @@
-import { css } from 'lit';
+import { css } from "lit";
 const ButtonStyles = css `
   /* Default (plain) button styling */
-  button,
-  .button {
-    background: var(--action-plain-background);
+  button {
+    background: var(--action-plain-background, transparent);
     /* border: 1px solid var(--action-plain-border-color); */
     border: none;
-    color: var(--component-text-color);
+    color: var(--component-text-color, light-dark(#333, #eee));
     cursor: pointer;
     padding: 8px;
-    border-radius: var(--card-inner-border-radius);
+    border-radius: var(--card-inner-border-radius, 6px);
     display: inline-flex;
     gap: 4px;
     align-items: center;
     justify-content: center;
     transition: background 0.3s ease;
-    font-family: var(--component-font-family);
   }
 
-  button:hover,
-  .button:hover {
-    background: var(--action-plain-background-hover);
+  button:hover {
+    background: var(--action-plain-background-hover, light-dark(#ddd, #444));
   }
 
   button:focus-visible {
-    outline: 2px solid var(--action-accent-background);
+    outline: 2px solid var(--action-accent-background, light-dark(#007bff, #0056b3));
     outline-offset: 2px;
   }
 
   /* Accent variant */
-  button.accent,
-  .button.accent {
-    background: var(--action-accent-background);
-    color: var(--action-accent-text-color);
+  button.accent {
+    background: var(--action-accent-background, light-dark(#007bff, #0056b3));
+    color: var(--action-accent-text-color, #fff);
     border: none;
   }
 
-  button.accent:hover,
-  .button.accent:hover {
-    background: var(--action-accent-background-hover);
+  button.accent:hover {
+    background: var(--action-accent-background-hover, light-dark(#0056b3, #003d80));
   }
 
-  /* Accent variant */
-  button.red,
-  .button.red {
-    background: var(--action-red-background);
-    color: var(--action-red-text-color);
+  /* Red variant */
+  button.red {
+    background: var(--action-red-background, light-dark(#dc3545, #bd2130));
+    color: var(--action-red-text-color, #fff);
     border: none;
   }
 
-  button.red:hover,
-  .button.red:hover {
-    background: var(--action-red-background-hover);
+  button.red:hover {
+    background: var(--action-red-background-hover, light-dark(#bd2130, #a71c24));
   }
 `;
 export default ButtonStyles;

package/dist/styles/buttons.js.map

@@ -1 +1 @@
-{"version":3,"file":"buttons.js","sourceRoot":"","sources":["../../src/styles/buttons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDvB,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst ButtonStyles = css`\n  /* Default (plain) button styling */\n  button,\n  .button {\n    background: var(--action-plain-background);\n    /* border: 1px solid var(--action-plain-border-color); */\n    border: none;\n    color: var(--component-text-color);\n    cursor: pointer;\n    padding: 8px;\n    border-radius: var(--card-inner-border-radius);\n    display: inline-flex;\n    gap: 4px;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.3s ease;\n    font-family: var(--component-font-family);\n  }\n\n  button:hover,\n  .button:hover {\n    background: var(--action-plain-background-hover);\n  }\n\n  button:focus-visible {\n    outline: 2px solid var(--action-accent-background);\n    outline-offset: 2px;\n  }\n\n  /* Accent variant */\n  button.accent,\n  .button.accent {\n    background: var(--action-accent-background);\n    color: var(--action-accent-text-color);\n    border: none;\n  }\n\n  button.accent:hover,\n  .button.accent:hover {\n    background: var(--action-accent-background-hover);\n  }\n\n  /* Accent variant */\n  button.red,\n  .button.red {\n    background: var(--action-red-background);\n    color: var(--action-red-text-color);\n    border: none;\n  }\n\n  button.red:hover,\n  .button.red:hover {\n    background: var(--action-red-background-hover);\n  }\n`;\n\nexport default ButtonStyles;\n"]}
+{"version":3,"file":"buttons.js","sourceRoot":"","sources":["../../src/styles/buttons.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CvB,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { css } from \"lit\";\n\nconst ButtonStyles = css`\n  /* Default (plain) button styling */\n  button {\n    background: var(--action-plain-background, transparent);\n    /* border: 1px solid var(--action-plain-border-color); */\n    border: none;\n    color: var(--component-text-color, light-dark(#333, #eee));\n    cursor: pointer;\n    padding: 8px;\n    border-radius: var(--card-inner-border-radius, 6px);\n    display: inline-flex;\n    gap: 4px;\n    align-items: center;\n    justify-content: center;\n    transition: background 0.3s ease;\n  }\n\n  button:hover {\n    background: var(--action-plain-background-hover, light-dark(#ddd, #444));\n  }\n\n  button:focus-visible {\n    outline: 2px solid var(--action-accent-background, light-dark(#007bff, #0056b3));\n    outline-offset: 2px;\n  }\n\n  /* Accent variant */\n  button.accent {\n    background: var(--action-accent-background, light-dark(#007bff, #0056b3));\n    color: var(--action-accent-text-color, #fff);\n    border: none;\n  }\n\n  button.accent:hover {\n    background: var(--action-accent-background-hover, light-dark(#0056b3, #003d80));\n  }\n\n  /* Red variant */\n  button.red {\n    background: var(--action-red-background, light-dark(#dc3545, #bd2130));\n    color: var(--action-red-text-color, #fff);\n    border: none;\n  }\n\n  button.red:hover {\n    background: var(--action-red-background-hover, light-dark(#bd2130, #a71c24));\n  }\n`;\n\nexport default ButtonStyles;\n"]}

package/dist/styles/callout.js

@@ -1,31 +1,21 @@
 import { css } from 'lit';
 const CalloutStyles = css `
   .callout {
-    background: var(--callout-info-background);
-    border: 1px solid var(--callout-info-border);
-    color: var(--callout-info-text);
+    background: var(--callout-info-background, light-dark(#007bff33, #0056b333));
+    border: 1px solid var(--callout-info-border, light-dark(#007bff99, #0056b399));
+    color: var(--callout-info-text, light-dark(#007bff, #0056b3));
     padding: 8px;
-    border-radius: var(--card-inner-border-radius);
+    border-radius: var(--card-inner-border-radius, 6px);
     display: flex;
     font-size: 0.9rem;
     gap: 8px;
     align-items: center;
     max-width: 100%;
     height: fit-content;
-    &.error {
-      background: var(--callout-error-background);
-      border: 1px solid var(--callout-error-border);
-      color: var(--callout-warn-text);
-    }
     &.warn {
-      background: var(--callout-warn-background);
-      border: 1px solid var(--callout-warn-border);
-      color: var(--callout-warn-text);
-    }
-    &.small {
-      width: 100%;
-      padding: 6px;
-      font-size: 0.7rem;
+      background: var(--callout-warn-background, light-dark(#fd7e1433, #e06c1233));
+      border: 1px solid var(--callout-warn-border, light-dark(#fd7e1499, #e06c1299));
+      color: var(--callout-warn-text, light-dark(#fd7e14, #e06c12));
     }
   }
 `;

package/dist/styles/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","sourceRoot":"","sources":["../../src/styles/callout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BxB,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst CalloutStyles = css`\n  .callout {\n    background: var(--callout-info-background);\n    border: 1px solid var(--callout-info-border);\n    color: var(--callout-info-text);\n    padding: 8px;\n    border-radius: var(--card-inner-border-radius);\n    display: flex;\n    font-size: 0.9rem;\n    gap: 8px;\n    align-items: center;\n    max-width: 100%;\n    height: fit-content;\n    &.error {\n      background: var(--callout-error-background);\n      border: 1px solid var(--callout-error-border);\n      color: var(--callout-warn-text);\n    }\n    &.warn {\n      background: var(--callout-warn-background);\n      border: 1px solid var(--callout-warn-border);\n      color: var(--callout-warn-text);\n    }\n    &.small {\n      width: 100%;\n      padding: 6px;\n      font-size: 0.7rem;\n    }\n  }\n`;\n\nexport default CalloutStyles;\n"]}
+{"version":3,"file":"callout.js","sourceRoot":"","sources":["../../src/styles/callout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmBxB,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst CalloutStyles = css`\n  .callout {\n    background: var(--callout-info-background, light-dark(#007bff33, #0056b333));\n    border: 1px solid var(--callout-info-border, light-dark(#007bff99, #0056b399));\n    color: var(--callout-info-text, light-dark(#007bff, #0056b3));\n    padding: 8px;\n    border-radius: var(--card-inner-border-radius, 6px);\n    display: flex;\n    font-size: 0.9rem;\n    gap: 8px;\n    align-items: center;\n    max-width: 100%;\n    height: fit-content;\n    &.warn {\n      background: var(--callout-warn-background, light-dark(#fd7e1433, #e06c1233));\n      border: 1px solid var(--callout-warn-border, light-dark(#fd7e1499, #e06c1299));\n      color: var(--callout-warn-text, light-dark(#fd7e14, #e06c12));\n    }\n  }\n`;\n\nexport default CalloutStyles;\n"]}

package/dist/styles/component-styles.d.ts

@@ -0,0 +1,2 @@
+declare const ComponentStyles: import("lit").CSSResult;
+export default ComponentStyles;

package/dist/styles/component-styles.js

@@ -0,0 +1,22 @@
+import { css } from "lit";
+const ComponentStyles = css `
+  :host {
+    font-family: var(--component-font-family, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif);
+  }
+
+  .wrapper {
+    background-color: var(--card-background, light-dark(#fff, #333));
+    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));
+    border-radius: var(--card-border-radius, 8px);
+    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));
+    padding: var(--card-padding, 4px);
+    display: flex;
+    gap: 4px;
+    height: 46px;
+    width: fit-content;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+`;
+export default ComponentStyles;
+//# sourceMappingURL=component-styles.js.map

package/dist/styles/component-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-styles.js","sourceRoot":"","sources":["../../src/styles/component-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;CAkB1B,CAAC;AAEF,eAAe,eAAe,CAAC","sourcesContent":["import { css } from \"lit\";\n\nconst ComponentStyles = css`\n  :host {\n    font-family: var(--component-font-family, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif);\n  }\n\n  .wrapper {\n    background-color: var(--card-background, light-dark(#fff, #333));\n    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));\n    border-radius: var(--card-border-radius, 8px);\n    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));\n    padding: var(--card-padding, 4px);\n    display: flex;\n    gap: 4px;\n    height: 46px;\n    width: fit-content;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n`;\n\nexport default ComponentStyles;\n"]}

package/dist/styles/default-theme.d.ts

@@ -0,0 +1,2 @@
+declare const DefaultThemeStyles: import("lit").CSSResult;
+export default DefaultThemeStyles;

package/dist/styles/default-theme.js

@@ -0,0 +1,14 @@
+import { css } from "lit";
+const DefaultThemeStyles = css `
+  :host {
+    /* 
+     * This file no longer defines CSS custom properties.
+     * Default values are now provided as fallbacks in var() calls throughout
+     * the component styles. This allows external styles to override variables
+     * set on the corti-dictation element.
+     * Example: corti-dictation { --card-background: #f0f0f0; }
+     */
+  }
+`;
+export default DefaultThemeStyles;
+//# sourceMappingURL=default-theme.js.map

package/dist/styles/default-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-theme.js","sourceRoot":"","sources":["../../src/styles/default-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;CAU7B,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nconst DefaultThemeStyles = css`\n  :host {\n    /* \n     * This file no longer defines CSS custom properties.\n     * Default values are now provided as fallbacks in var() calls throughout\n     * the component styles. This allows external styles to override variables\n     * set on the corti-dictation element.\n     * Example: corti-dictation { --card-background: #f0f0f0; }\n     */\n  }\n`;\n\nexport default DefaultThemeStyles;\n"]}

package/dist/styles/recording-button.d.ts

@@ -0,0 +1,2 @@
+declare const RecordingButtonStyles: import("lit").CSSResult;
+export default RecordingButtonStyles;

package/dist/styles/recording-button.js

@@ -0,0 +1,8 @@
+import { css } from "lit";
+const RecordingButtonStyles = css `
+  :host {
+    display: inline-flex;
+  }
+`;
+export default RecordingButtonStyles;
+//# sourceMappingURL=recording-button.js.map

package/dist/styles/recording-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recording-button.js","sourceRoot":"","sources":["../../src/styles/recording-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;CAIhC,CAAC;AAEF,eAAe,qBAAqB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nconst RecordingButtonStyles = css`\n  :host {\n    display: inline-flex;\n  }\n`;\n\nexport default RecordingButtonStyles;\n"]}

package/dist/styles/select.js

@@ -1,19 +1,19 @@
-import { css } from 'lit';
+import { css } from "lit";
 const SelectStyles = css `
   label {
     display: block;
     font-size: 0.8rem;
     padding-bottom: 0.5rem;
     font-weight: 500;
-    color: var(--component-text-color);
+    color: var(--component-text-color, light-dark(#333, #eee));
     pointer-events: none;
   }
   select {
-    background: var(--card-background);
-    color: var(--component-text-color);
-    border: 1px solid var(--card-border-color);
-    padding: var(--card-padding);
-    border-radius: var(--card-inner-border-radius);
+    background: var(--card-background, light-dark(#fff, #333));
+    color: var(--component-text-color, light-dark(#333, #eee));
+    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));
+    padding: var(--card-padding, 4px);
+    border-radius: var(--card-inner-border-radius, 6px);
     outline: none;
     width: 100%;
   }
@@ -24,11 +24,11 @@ const SelectStyles = css `
   }
 
   select:hover {
-    background: var(--action-plain-background-hover);
+    background: var(--action-plain-background-hover, light-dark(#ddd, #444));
   }
 
   select:focus-visible {
-    outline: 2px solid var(--action-accent-background);
+    outline: 2px solid var(--action-accent-background, light-dark(#007bff, #0056b3));
     /* outline-offset: 2px; */
   }
 `;

package/dist/styles/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/styles/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCvB,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst SelectStyles = css`\n  label {\n    display: block;\n    font-size: 0.8rem;\n    padding-bottom: 0.5rem;\n    font-weight: 500;\n    color: var(--component-text-color);\n    pointer-events: none;\n  }\n  select {\n    background: var(--card-background);\n    color: var(--component-text-color);\n    border: 1px solid var(--card-border-color);\n    padding: var(--card-padding);\n    border-radius: var(--card-inner-border-radius);\n    outline: none;\n    width: 100%;\n  }\n\n  select:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  select:hover {\n    background: var(--action-plain-background-hover);\n  }\n\n  select:focus-visible {\n    outline: 2px solid var(--action-accent-background);\n    /* outline-offset: 2px; */\n  }\n`;\n\nexport default SelectStyles;\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/styles/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCvB,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { css } from \"lit\";\n\nconst SelectStyles = css`\n  label {\n    display: block;\n    font-size: 0.8rem;\n    padding-bottom: 0.5rem;\n    font-weight: 500;\n    color: var(--component-text-color, light-dark(#333, #eee));\n    pointer-events: none;\n  }\n  select {\n    background: var(--card-background, light-dark(#fff, #333));\n    color: var(--component-text-color, light-dark(#333, #eee));\n    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));\n    padding: var(--card-padding, 4px);\n    border-radius: var(--card-inner-border-radius, 6px);\n    outline: none;\n    width: 100%;\n  }\n\n  select:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  select:hover {\n    background: var(--action-plain-background-hover, light-dark(#ddd, #444));\n  }\n\n  select:focus-visible {\n    outline: 2px solid var(--action-accent-background, light-dark(#007bff, #0056b3));\n    /* outline-offset: 2px; */\n  }\n`;\n\nexport default SelectStyles;\n"]}

package/dist/styles/settings-menu.d.ts

@@ -0,0 +1,2 @@
+declare const SettingsMenuStyles: import("lit").CSSResult;
+export default SettingsMenuStyles;

package/dist/styles/settings-menu.js

@@ -0,0 +1,34 @@
+import { css } from "lit";
+const SettingsMenuStyles = css `
+  :host {
+    display: block;
+  }
+  /* Retain the anchor-name styling for this component */
+  #settings-popover-button {
+    anchor-name: --settings_popover_btn;
+  }
+  [popover] {
+    margin: 0;
+    padding: 16px;
+    background: var(--card-background, light-dark(#fff, #333));
+    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));
+    border-radius: var(--card-border-radius, 8px);
+    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));
+    z-index: 1000;
+    max-width: 260px;
+    width: 100%;
+    min-width: 200px;
+    position-anchor: --settings_popover_btn;
+    position-area: bottom span-right;
+    position-visibility: always;
+    position-try-fallbacks: flip-inline;
+    overflow-x: hidden;
+  }
+  .settings-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+`;
+export default SettingsMenuStyles;
+//# sourceMappingURL=settings-menu.js.map

package/dist/styles/settings-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-menu.js","sourceRoot":"","sources":["../../src/styles/settings-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B7B,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nconst SettingsMenuStyles = css`\n  :host {\n    display: block;\n  }\n  /* Retain the anchor-name styling for this component */\n  #settings-popover-button {\n    anchor-name: --settings_popover_btn;\n  }\n  [popover] {\n    margin: 0;\n    padding: 16px;\n    background: var(--card-background, light-dark(#fff, #333));\n    border: 1px solid var(--card-border-color, light-dark(#ddd, #555));\n    border-radius: var(--card-border-radius, 8px);\n    box-shadow: var(--card-box-shadow, 0 2px 5px rgba(0, 0, 0, 0.1));\n    z-index: 1000;\n    max-width: 260px;\n    width: 100%;\n    min-width: 200px;\n    position-anchor: --settings_popover_btn;\n    position-area: bottom span-right;\n    position-visibility: always;\n    position-try-fallbacks: flip-inline;\n    overflow-x: hidden;\n  }\n  .settings-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 20px;\n  }\n`;\n\nexport default SettingsMenuStyles;\n"]}