@api-client/ui 0.0.4 → 0.0.7

package/src/elements/schema-design/DataSchemaDocument.ts

@@ -8,11 +8,11 @@ import schemaCommon from './schemaCommon.js';
 import EditorCommon from './CommonStyles.js';
 import MarkdownStyles from '../highlight/MarkdownStyles.js';
 import typography from "../../styles/m3/typography.module.js";
+import type RadioElement from "../../ui/input/RadioElement.js";
 import '../../define/ui/ui-button.js';
 import '../../define/ui/ui-icon-button.js';
 import '../../define/ui/ui-icon.js';
 import '../../define/ui/ui-radio.js';
-import RadioElement from "../../ui/input/RadioElement.js";
 
 /**
  * We keep the list of expanded attributes in a weak map
@@ -176,7 +176,7 @@ export default class DataSchemaDocument extends ApiElement {
         }
       }));
     }
-    this._notifyChanged();
+    this.notifyChange();
   }
 
   /**
@@ -191,7 +191,7 @@ export default class DataSchemaDocument extends ApiElement {
       return;
     }
     _entity.removeAssociation(key);
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 
@@ -202,7 +202,7 @@ export default class DataSchemaDocument extends ApiElement {
     }
     const created = _entity.addNamedProperty(name || 'New property');
     this.selectedProperty = created.key;
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
     this.dispatchEvent(new CustomEvent('edit', {
       detail: {
@@ -221,14 +221,10 @@ export default class DataSchemaDocument extends ApiElement {
     if (this.selectedProperty === key) {
       this.selectedProperty = undefined;
     }
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 
-  protected _notifyChanged(): void {
-    this.dispatchEvent(new Event('change'));
-  }
-
   protected _addPropertyHandler(): void {
     this.addProperty();
   }

package/src/elements/schema-design/EntityFormElement.ts

@@ -6,8 +6,8 @@ import ApiElement from "../ApiElement.js";
 import EditorCommon from './CommonStyles.js';
 import theme from '../theme.js';
 import typography from "../../styles/m3/typography.module.js";
-import Input from "../../ui/input/Input.js";
-import CheckboxElement from "../../ui/input/CheckboxElement.js";
+import type Input from "../../ui/input/Input.js";
+import type CheckboxElement from "../../ui/input/CheckboxElement.js";
 import '../../define/ui/ui-text-field.js';
 import '../../define/ui/ui-checkbox.js';
 import '../../define/ui/ui-divider.js';
@@ -99,11 +99,7 @@ export default class EntityFormElement extends ApiElement {
     if (!_entity.parents.includes(parentKey)) {
       _entity.parents.push(parentKey);
     }
-    this._notifyChanged();
-  }
-
-  protected _notifyChanged(): void {
-    this.dispatchEvent(new Event('change'));
+    this.notifyChange();
   }
 
   /**
@@ -133,7 +129,7 @@ export default class EntityFormElement extends ApiElement {
       return;
     }
     _entity.info[name as 'name' | 'description' | 'displayName'] = value;
-    this._notifyChanged();
+    this.notifyChange();
     if (name === 'name' || name === 'displayName') {
       this.dispatchEvent(new Event('namechange'));
     }
@@ -151,7 +147,7 @@ export default class EntityFormElement extends ApiElement {
       return;
     }
     _entity[name] = checked;
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 
@@ -202,7 +198,7 @@ export default class EntityFormElement extends ApiElement {
       return;
     }
     _entity.parents.splice(index, 1);
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 

package/src/elements/schema-design/PropertyFormElement.ts

@@ -8,9 +8,9 @@ import ApiElement from "../ApiElement.js";
 import EditorCommon from './CommonStyles.js';
 import theme from '../theme.js';
 import typography from "../../styles/m3/typography.module.js";
-import CheckboxElement from "../../ui/input/CheckboxElement.js";
-import { SupportedInputTypes } from "../../types/input.js";
-import Input from "../../ui/input/Input.js";
+import type CheckboxElement from "../../ui/input/CheckboxElement.js";
+import type { SupportedInputTypes } from "../../types/input.js";
+import type Input from "../../ui/input/Input.js";
 import '../../define/ui/ui-text-field.js';
 import '../../define/ui/ui-checkbox.js';
 import '../../define/ui/ui-divider.js';
@@ -84,10 +84,6 @@ export default class PropertyFormElement extends ApiElement {
     }
   }
 
-  protected _notifyChanged(): void {
-    this.dispatchEvent(new Event('change'));
-  }
-
   /**
    * Computes the view value for the property.
    * This should be called before the update is complete so this won't trigger another update.
@@ -115,7 +111,7 @@ export default class PropertyFormElement extends ApiElement {
       return;
     }
     _property.info[name as 'name' | 'description' | 'displayName'] = value;
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 
@@ -128,7 +124,7 @@ export default class PropertyFormElement extends ApiElement {
       return;
     }
     _property.type = value;
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 
@@ -155,7 +151,7 @@ export default class PropertyFormElement extends ApiElement {
       return;
     }
     _property[name] = checked;
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 
@@ -192,7 +188,7 @@ export default class PropertyFormElement extends ApiElement {
     } else {
       delete schema.defaultValue;
     }
-    this._notifyChanged();
+    this.notifyChange();
   }
 
   /**
@@ -211,7 +207,7 @@ export default class PropertyFormElement extends ApiElement {
     }
     const list = schema.examples as string[];
     list.push(value as string);
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 
@@ -230,7 +226,7 @@ export default class PropertyFormElement extends ApiElement {
       return;
     }
     schema.examples.splice(index, 1);
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 
@@ -270,7 +266,7 @@ export default class PropertyFormElement extends ApiElement {
     }
     const list = schema.enum as string[];
     list.push(value as string);
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 
@@ -289,7 +285,7 @@ export default class PropertyFormElement extends ApiElement {
       return;
     }
     schema.enum.splice(index, 1);
-    this._notifyChanged();
+    this.notifyChange();
     this.requestUpdate();
   }
 

package/src/pages/ApplicationScreen.ts

@@ -10,11 +10,11 @@ import { EventTypes } from '../events/EventTypes.js';
 import { ConfigBroadcast, ConfigBroadcastChannel, IConfigEnvironment, ThemeType } from '../lib/config/Config.js';
 import supportedPlatform from '../lib/SupportedPlatform.js';
 import { ButtonType } from '../ui/button/UiButton.js';
-import '../define/ui/ui-button.js';
 import { StoreBindings } from '../bindings/base/StoreBindings.js';
 import type { AddConfigEnvironmentInit, ConfigurationBindings } from '../bindings/base/ConfigurationBindings.js';
 import { PlatformBindings } from '../bindings/base/PlatformBindings.js';
 import { SnackNotifications } from '../ui/notification/SnackNotifications.js';
+import '../define/ui/ui-button.js';
 
 export interface ApplicationInit {
   /**

package/src/pages/api-client/ApiClient.styles.ts

@@ -47,6 +47,7 @@ main {
   padding: 8px 8px 8px 16px;
   margin: 0px;
   box-sizing: border-box;
+  color: var(--md-sys-color-on-surface);
 }
 
 /* Header */
@@ -56,12 +57,27 @@ main {
   background-color: var(--md-ref-palette-neutral95);
   display: flex;
   align-items: center;
-  color: var(--md-sys-color-on-surface-variant);
-
+  
   padding: 8px 24px;
   box-sizing: border-box;
-
+  
   width: calc(33.3333%); /* 4 columns */
+  
+  color: var(--md-sys-color-on-surface-variant);
+  background-color: var(--md-sys-color-surface-variant);
+
+  position: relative;
+  z-index: 0;
+}
+
+.search-box::before {
+  content: "";
+  position: absolute;
+  inset: 0px;
+  opacity: 0;
+  background-color: var(--md-sys-color-on-surface-variant);
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+  z-index: -1;
 }
 
 .search-icon {
@@ -79,6 +95,8 @@ main {
   border: none;
   flex: 1;
   outline: none;
+  caret-color: var(--md-sys-color-primary);
+  color: var(--md-sys-color-on-surface);
 }
 
 .search-box > input::placeholder {
@@ -95,6 +113,7 @@ main {
 
 .workspace-dropdown {
   margin-right: 12px;
+  color: var(--md-sys-color-on-surface);
 }
 
 .workspace-selector {

package/src/pages/api-client/Authenticate.screen.ts

@@ -34,6 +34,8 @@ export default class AuthenticateScreen extends ApplicationScreen {
    */
   @reactive() authenticating = false;
 
+  isSessionStore = false;
+
   constructor(init: ApplicationInit) {
     super(init);
   }
@@ -43,7 +45,7 @@ export default class AuthenticateScreen extends ApplicationScreen {
       await this.bindings.store.initialize();
       await this.bindings.store.initializeStore();
       await this.bindings.config.initialize();
-      const env = await this.bindings.config.session.get(`${EnvironmentsKey}.creating`) as IConfigEnvironment;
+      const env = await this.readEnvironment();
       if (env) {
         this.environment = env;
       } else {
@@ -54,6 +56,16 @@ export default class AuthenticateScreen extends ApplicationScreen {
     }
   }
 
+  async readEnvironment(): Promise<IConfigEnvironment | undefined> {
+    let env = await this.bindings.config.session.get(`${EnvironmentsKey}.creating`) as IConfigEnvironment | undefined;
+    if (!env) {
+      env = await this.bindings.config.environment.read();
+    } else {
+      this.isSessionStore = true;
+    }
+    return env;
+  }
+
   protected handleAuthenticate(): void {
     const { environment } = this;
     if (!environment) {
@@ -77,8 +89,12 @@ export default class AuthenticateScreen extends ApplicationScreen {
       this.authenticating = false;
     }
     if (info) {
-      await this.bindings.config.environment.add(env, { asDefault: true });
-      await this.bindings.config.session.delete(`${EnvironmentsKey}.creating`);
+      if (this.isSessionStore) {
+        await this.bindings.config.environment.add(env, { asDefault: true });
+        await this.bindings.config.session.delete(`${EnvironmentsKey}.creating`);
+      } else {
+        await this.bindings.config.environment.update(env);
+      }
     }
   }
 

package/src/pages/api-client/StoreConfig.screen.ts

@@ -740,12 +740,13 @@ export default class StoreConfigScreen extends ApplicationScreen {
   }
 
   renderActions(): TemplateResult {
+    const canCancel = this.initReason !== 'first-run';
     return html`
     <div class="actions">
-      <ui-button
+      ${canCancel ? html`<ui-button
         type="text"
         @click="${this.handleCancel}"
-      >Cancel</ui-button>
+      >Cancel</ui-button>` : nothing}
       <ui-button 
         type="filled"
         ?disabled="${!this.storeType}" 
@@ -761,6 +762,7 @@ export default class StoreConfigScreen extends ApplicationScreen {
       ?open="${this.infoDialogOpened}" 
       @close="${this.handleDialogClose}" 
       class="help-dialog"
+      modal
     >
       <ui-icon slot="icon" icon="help"></ui-icon>
       

package/src/pages/api-client/StoreConfig.styles.ts

@@ -125,4 +125,9 @@ nav > ui-button {
   height: 56px;
   margin-bottom: 20px;
 }
+
+.headline-medium,
+.title-large {
+  color: var(--md-sys-color-on-surface);
+}
 `;

package/src/pages/api-client/pages/Files.page.ts

@@ -33,6 +33,7 @@ import '../../../define/ui/ui-icon.js';
 import '../../../define/ui/ui-icon-button.js';
 import '../../../define/ui/ui-button.js';
 import '../../../define/ui/ui-divider.js';
+import '../../../define/ui/ui-text-field.js';
 import '../../../define/dialog/rename-dialog.js';
 import '../../../define/files/share-file.js';
 
@@ -632,7 +633,7 @@ export class FilesPage {
     return html`
     ${this.renderSelectionShareButton(file)}
     ${this.renderSelectionDeleteButton(file)}
-    <ui-divider horizontal type="middle"></ui-divider>
+    <ui-divider vertical type="middle"></ui-divider>
     `;
   }
 

package/src/pages/http-project/HttpProject.screen.ts

@@ -16,7 +16,6 @@ import globalStyles from '../../styles/global-styles.js';
 import typography from '../../styles/m3/typography.module.js';
 import dialogStyles from '../../styles/m3/dialog.module.js';
 import surfaceStyles from '../../styles/m3/surface.module.js';
-import { HttpClientStoreBindings } from "../../bindings/base/HttpClientStoreBindings.js";
 import { StoreBroadcast } from "../../http-client/store/StoreBroadcast.js";
 import { Events } from "../../events/Events.js";
 import { navigate } from "../../lib/route.js";
@@ -30,13 +29,10 @@ import HttpProjectRequest from "../../elements/project/HttpProjectRequest.js";
 import { ISplitLayout, SplitLayout } from "../../elements/layout/SplitLayout.js";
 import { SplitItem } from "../../elements/layout/SplitItem.js";
 import { LayoutType } from "../../elements/layout/type.js";
-// eslint-disable-next-line import/no-cycle
 import { HttpClientProjectBindings, RunnerKind } from "./types.js";
 import { ProxyBindings } from "../../bindings/base/ProxyBindings.js";
 import { IconType } from "../../ui/icons/Icons.js";
 import ProjectRunner from "../../elements/project/ProjectRunner.js";
-import { StoreBindings } from "../../bindings/base/StoreBindings.js";
-import { ConfigurationBindings } from "../../bindings/base/ConfigurationBindings.js";
 import '../../define/ui/ui-button.js';
 import '../../define/ui/ui-icon.js';
 import '../../define/http-project/project-navigation.js';
@@ -118,21 +114,12 @@ export default class HttpProjectScreen extends ApplicationScreen {
 
   protected uiMap = new Map<string, IRequestUiMeta>();
 
-  idb: HttpClientStoreBindings;
-
-  store: StoreBindings;
-
-  proxy: ProxyBindings;
-
-  config: ConfigurationBindings;
-
   constructor(bindings: HttpClientProjectBindings) {
     super(bindings);
 
-    this.idb = bindings.idb;
-    this.store = bindings.store;
-    this.proxy = bindings.http;
-    this.config = bindings.config;
+    this.bindings.idb = bindings.idb;
+    this.bindings.proxy = bindings.proxy;
+    this.bindings.navigation = bindings.navigation;
 
     this.menu = new HttpClientContextMenu();
     this.menu.connect();
@@ -152,19 +139,20 @@ export default class HttpProjectScreen extends ApplicationScreen {
       this.reportCriticalError((e as Error).message);
       return;
     }
-    await this.idb.initialize();
-    await this.store.initialize();
-    await this.proxy.initialize();
-    await this.config.initialize();
+    await this.bindings.navigation.initialize();
+    await this.bindings.idb.initialize();
+    await this.bindings.store.initialize();
+    await this.bindings.proxy.initialize();
+    await this.bindings.config.initialize();
     await this.initializeConfig();
     await this.initializeStore();
-    this.store.space = this.workspace;
-    this.proxy.space = this.workspace;
+    this.bindings.store.space = this.workspace;
+    (this.bindings.proxy as ProxyBindings).space = this.workspace;
 
     await this.setupProject(this.key);
 
-    await this.store.observeFile(this.key, 'media');
-    await this.store.observeHistory();
+    await this.bindings.store.observeFile(this.key, 'media');
+    await this.bindings.store.observeHistory();
 
     this.layoutStoreKey = `http-client.http-project.state.layout.${this.key}`;
     const state = await this.restoreLayout();
@@ -217,7 +205,7 @@ export default class HttpProjectScreen extends ApplicationScreen {
   }
 
   async readProjectFile(key: string): Promise<IHttpProject> {
-    const media = await this.store.media.read(key) as IHttpProject;
+    const media = await this.bindings.store.media.read(key) as IHttpProject;
     return media;
   }
 
@@ -228,7 +216,7 @@ export default class HttpProjectScreen extends ApplicationScreen {
       patch: value,
       id,
     };
-    await this.store.media.patch(key, info);
+    await this.bindings.store.media.patch(key, info);
   }
 
   /**

package/src/pages/http-project/types.ts

@@ -1,9 +1,10 @@
-import { HttpProject } from "@api-client/core/build/browser.js";
-import { ProxyBindings } from "../../bindings/base/ProxyBindings.js";
-import { HttpClientStoreBindings } from "../../bindings/base/HttpClientStoreBindings.js";
-import { SplitLayout } from "../../elements/layout/SplitLayout.js";
+import type { HttpProject } from "@api-client/core/build/browser.js";
+import type { ProxyBindings } from "../../bindings/base/ProxyBindings.js";
+import type { HttpClientStoreBindings } from "../../bindings/base/HttpClientStoreBindings.js";
+import type { SplitLayout } from "../../elements/layout/SplitLayout.js";
 import type HttpProjectScreen from "./HttpProject.screen.js";
-import { ApplicationInit } from "../ApplicationScreen.js";
+import type { ApplicationInit } from "../ApplicationScreen.js";
+import type { NavigationBindings } from "../../bindings/base/NavigationBindings.js";
 
 export interface CallbackReason {
   action: 'delete' | 'duplicate' | 'add';
@@ -22,7 +23,8 @@ export interface HttpProjectContextualStore extends Map<string, unknown> {
 
 export interface HttpClientProjectBindings extends ApplicationInit {
   idb: HttpClientStoreBindings;
-  http: ProxyBindings;
+  proxy: ProxyBindings;
+  navigation: NavigationBindings;
 }
 
 export const RunnerKind = 'HttpClient#ProjectRunner';

package/src/styles/m3/surface.module.ts

@@ -6,44 +6,28 @@ export default css`
 .surface3,
 .surface4,
 .surface5 {
-  /* background-color: var(--md-sys-color-surface); */
   color: var(--md-sys-color-on-surface);
-  position: relative;
-  z-index: 0;
-}
-
-.surface1::before,
-.surface2::before,
-.surface3::before,
-.surface4::before,
-.surface5::before {
-  content: '';
-  background-color: var(--md-sys-color-primary);
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  z-index: -1;
 }
 
-.surface1::before {
-  opacity: .05;
+.surface1 {
+  background-color: var(--md-sys-color-primary-05a);
 }
 
-.surface2::before {
-  /* opacity: .08; */
-  opacity: .05;
+.surface2 {
+  /* background-color: var(--md-sys-color-primary-08a); */
+  background-color: var(--md-sys-color-primary-05a);
 }
 
-.surface3::before {
-  opacity: .11;
+.surface3 {
+  background-color: var(--md-sys-color-primary-11a);
 }
 
-.surface4::before {
-  opacity: .12;
+.surface4 {
+  background-color: var(--md-sys-color-primary-12a);
 }
 
-.surface5::before {
-  opacity: .13;
+.surface5 {
+  background-color: var(--md-sys-color-primary-13a);
 }
 
 /* .surface1 > *,

package/src/styles/m3/theme.css

@@ -1,5 +1,10 @@
 html.theme-light {
   --md-sys-color-primary: var(--md-sys-color-primary-light);
+  --md-sys-color-primary-05a: var(--md-sys-color-primary-light-05a);
+  --md-sys-color-primary-08a: var(--md-sys-color-primary-light-08a);
+  --md-sys-color-primary-11a: var(--md-sys-color-primary-light-11a);
+  --md-sys-color-primary-12a: var(--md-sys-color-primary-light-12a);
+  --md-sys-color-primary-13a: var(--md-sys-color-primary-light-13a);
   --md-sys-color-on-primary: var(--md-sys-color-on-primary-light);
   --md-sys-color-primary-container: var(--md-sys-color-primary-container-light);
   --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light);
@@ -37,10 +42,28 @@ html.theme-light {
   --md-sys-elevation-3: var(--md-sys-elevation-3-light);
   --md-sys-elevation-4: var(--md-sys-elevation-4-light);
   --md-sys-elevation-5: var(--md-sys-elevation-5-light);
+
+  /* Prism */
+  --code-operator-value-color: #a67f59;
+  --code-operator-value-background-color: hsla(0, 0%, 100%, 0.5);
+  --code-keyword-value-color: #07a;
+  --code-function-value-color: #dd4a68;
+  --code-variable-value-color: #e90;
+  --code-type-text-value-color: #690;
+  --code-type-boolean-value-color: #905;
+  --code-type-number-value-color: #905;
+  --code-property-value-color: #905;
+  --code-punctuation-value-color: #999;
+  --code-token-comment-value-color: slategray;
 }
 
 html.theme-dark {
   --md-sys-color-primary: var(--md-sys-color-primary-dark);
+  --md-sys-color-primary-05a: var(--md-sys-color-primary-dark-05a);
+  --md-sys-color-primary-08a: var(--md-sys-color-primary-dark-08a);
+  --md-sys-color-primary-11a: var(--md-sys-color-primary-dark-11a);
+  --md-sys-color-primary-12a: var(--md-sys-color-primary-dark-12a);
+  --md-sys-color-primary-13a: var(--md-sys-color-primary-dark-13a);
   --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark);
   --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark);
   --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark);
@@ -78,4 +101,17 @@ html.theme-dark {
   --md-sys-elevation-3: var(--md-sys-elevation-3-dark);
   --md-sys-elevation-4: var(--md-sys-elevation-4-dark);
   --md-sys-elevation-5: var(--md-sys-elevation-5-dark);
+
+  /* Prism */
+  --code-operator-value-color: #ffc185;
+  --code-operator-value-background-color: transparent;
+  --code-keyword-value-color: #00b2ff;
+  --code-function-value-color: #ff7d97;
+  --code-variable-value-color: #e90;
+  --code-type-text-value-color: #aaff00;
+  --code-type-boolean-value-color: #f882c4;
+  --code-type-number-value-color: #f882c4;
+  --code-property-value-color: #ff9bd3;
+  --code-punctuation-value-color: #aaa;
+  --code-token-comment-value-color: #93a9bf;
 }

package/src/styles/m3/tokens.css

@@ -86,6 +86,11 @@ html {
   --md-ref-palette-neutral-variant100: #FFFFFF;
   /* light */
   --md-sys-color-primary-light: #6750A4;
+  --md-sys-color-primary-light-05a: #6750a40d;
+  --md-sys-color-primary-light-08a: #6750a414;
+  --md-sys-color-primary-light-11a: #6750a41c;
+  --md-sys-color-primary-light-12a: #6750a41f;
+  --md-sys-color-primary-light-13a: #6750a421;
   --md-sys-color-on-primary-light: #FFFFFF;
   --md-sys-color-primary-container-light: #EADDFF;
   --md-sys-color-on-primary-container-light: #21005D;
@@ -117,6 +122,11 @@ html {
   --md-sys-color-scrim-light: #000000;
   /* dark */
   --md-sys-color-primary-dark: #D0BCFF;
+  --md-sys-color-primary-dark-05a: #D0BCFF0d;
+  --md-sys-color-primary-dark-08a: #D0BCFF14;
+  --md-sys-color-primary-dark-11a: #D0BCFF1c;
+  --md-sys-color-primary-dark-12a: #D0BCFF1f;
+  --md-sys-color-primary-dark-13a: #D0BCFF21;
   --md-sys-color-on-primary-dark: #381E72;
   --md-sys-color-primary-container-dark: #4F378B;
   --md-sys-color-on-primary-container-dark: #EADDFF;
@@ -277,6 +287,7 @@ html {
   --md-sys-shape-corner-extra-small-top: 4px 4px 0px 0px;
   --md-sys-shape-corner-small: 8px;
   --md-sys-shape-corner-small-top: 8px 8px 0 0;
+  --md-sys-shape-corner-small-bottom: 0 0 8px 8px;
   --md-sys-shape-corner-medium: 12px;
   --md-sys-shape-corner-medium-top: 12px 12px 0 0;
   --md-sys-shape-corner-large: 16px;

package/src/ui/UiElement.ts

@@ -132,4 +132,11 @@ export abstract class UiElement extends LitElement implements ActionControllerHo
   handleKeyUp(e: KeyboardEvent): void {
     this.actionController.keyUp(e);
   }
+
+  /**
+   * A common way for an element to notify a change.
+   */
+  notifyChange(): void {
+    this.dispatchEvent(new Event('change'));
+  }
 }

package/src/ui/button/SegmentedButton.styles.ts

@@ -24,7 +24,7 @@ export default css`
   text-decoration: var(--md-sys-typescale-label-large-text-decoration);
 
   border: 1px var(--md-sys-color-outline) solid;
-  color: 1px var(--md-sys-color-on-surface) solid;
+  color: var(--md-sys-color-on-surface);
   box-sizing: border-box;
 }
 
@@ -79,6 +79,8 @@ export default css`
   display: block;
   width: 0px;
   height: inherit;
+
+  fill: var(--md-sys-color-on-surface);
 }
 
 .check-mark {