chore: internal change

PiperOrigin-RevId: 464164877

segmented_button/lib/_outlined-segmented-button-theme.scss

@@ -24,9 +24,17 @@ $dark-theme: tokens.md-comp-outlined-segmented-button-values(
     $theme,
     $require-all: false
   );
+  $theme: _extend-theme($theme);
   $theme: segmented-button-theme.resolve-theme($theme, $resolvers);
   $theme: theme.create-theme-vars($theme, 'segmented-button');
 
+  @include segmented-button-theme.container-start-padding(
+    map.get($theme, 'spacing-leading')
+  );
+  @include segmented-button-theme.container-end-padding(
+    map.get($theme, 'spacing-trailing')
+  );
+
   @include segmented-button-theme.unselected-ripple(
     (
       'hover-state-layer-color':
@@ -140,3 +148,20 @@ $dark-theme: tokens.md-comp-outlined-segmented-button-values(
     )
   );
 }
+
+///
+/// Applies missing tokens to the given theme. This is a temporary function
+/// that will be deleted once the corresponding tokens are added to the design
+/// system information.
+///
+@function _extend-theme($theme) {
+  // TODO(b/198759625): Remove spacing tokens once provided.
+  $theme: map.merge(
+    $theme,
+    (
+      'spacing-leading': 12px,
+      'spacing-trailing': 12px,
+    )
+  );
+  @return $theme;
+}

segmented_button/lib/_segmented-button-theme.scss

@@ -211,6 +211,24 @@
   }
 }
 
+///
+/// Container start padding sets the given padding as the starting padding for
+/// the container. It uses CSS logical properties.
+/// @param {Number} $padding - the padding to use.
+///
+@mixin container-start-padding($padding) {
+  padding-inline-start: $padding;
+}
+
+///
+/// Container end padding sets the given padding as the ending padding for
+/// the container. It uses CSS logical properties.
+/// @param {Number} $padding - the padding to use.
+///
+@mixin container-end-padding($padding) {
+  padding-inline-end: $padding;
+}
+
 ///
 /// Icon label color sets the color of the icon.
 /// @param {Color} $color - the color of the icon.

segmented_button/lib/_segmented-button.scss

@@ -50,7 +50,6 @@
     flex: 1;
     justify-content: center;
     outline: none;
-    padding: 0;
     position: relative;
     vertical-align: middle;
   }

segmented_button/lib/segmented-button.ts

@@ -108,7 +108,6 @@ export class SegmentedButton extends ActionElement {
 
   /** @soyTemplate */
   override render(): TemplateResult {
-    // TODO(b/219531586): Remove clickmod handler once resolved.
     return html`
       <button
         tabindex="${this.disabled ? '-1' : '0'}"
@@ -123,7 +122,6 @@ export class SegmentedButton extends ActionElement {
         @pointerleave="${this.handlePointerLeave}"
         @pointerenter="${this.handlePointerEnter}"
         @click="${this.handleClick}"
-        @clickmod="${this.handleClick}"
         @contextmenu="${this.handleContextMenu}"
         class="md3-segmented-button ${classMap(this.getRenderClasses())}">
         ${this.renderFocusRing()}