primer_view_components 0.0.92 → 0.0.93

data/app/components/primer/beta/button.pcss

@@ -0,0 +1,332 @@
+/* CSS for Button  */
+/* temporary, pre primitives release */
+:root {
+  --primer-duration-fast: 80ms;
+  --primer-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+/* base button */
+.Button {
+  position: relative;
+  font-size: var(--primer-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-medium, 500);
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: var(--primer-borderWidth-thin, 1px) solid;
+  border-color: transparent;
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  color: var(--color-btn-text);
+  transition: var(--primer-duration-fast) var(--primer-easing-easeInOut);
+  transition-property: color, fill, background-color, border-color;
+  text-align: center;
+  height: var(--primer-control-medium-size, 32px);
+  padding: 0 var(--primer-control-medium-paddingInline-normal, 12px);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--primer-control-medium-gap, 8px);
+
+  /* mobile friendly sizing */
+  @media (pointer: course) {
+    &::before {
+      @mixin minTouchTarget 48px, 48px;
+    }
+  }
+
+  /* base states */
+
+  &:hover {
+    transition-duration: var(--primer-duration-fast);
+  }
+
+  &:active,
+  &.Button--active {
+    transition: none;
+  }
+
+  &:disabled,
+  &.Button--disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  /* &:focus {
+    @mixin focusOutline;
+  } */
+}
+
+.Button-withTooltip {
+  position: relative;
+  display: inline-block;
+}
+
+a.Button,
+summary.Button {
+  display: inline-flex;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+/* wrap grid content to allow trailingAction to lock-right */
+.Button-content {
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: 'leadingVisual text trailingVisual';
+  grid-template-columns: min-content minmax(0, auto) min-content;
+  align-items: center;
+  place-content: center;
+  /* padding-bottom: 1px; optical alignment for firefox */
+
+  & > :not(:last-child) {
+    margin-right: var(--primer-control-medium-gap, 8px);
+  }
+}
+
+/* center child elements for fullWidth */
+.Button-content--alignStart {
+  justify-content: start;
+}
+
+/* button child elements */
+
+/* align svg */
+.Button-visual {
+  display: flex;
+  pointer-events: none; /* allow click handler to work, avoiding visuals */
+}
+
+.Button-label {
+  grid-area: text;
+  white-space: nowrap;
+  line-height: var(--primer-text-body-lineHeight-medium, calc(20/14));
+}
+
+.Button-leadingVisual {
+  grid-area: leadingVisual;
+}
+
+.Button-trailingVisual {
+  grid-area: trailingVisual;
+}
+
+.Button-trailingAction {
+  margin-right: calc(var(--base-size-4, 4px) * -1);
+}
+
+/* sizes */
+
+.Button--small {
+  font-size: var(--primer-text-body-size-small, 12px);
+  height: var(--primer-control-small-size, 28px);
+  padding: 0 var(--primer-control-small-paddingInline-normal, 12px);
+  gap: var(--primer-control-small-gap, 4px);
+
+  .Button-label {
+    line-height: var(--primer-text-body-lineHeight-small, calc(20/12));
+  }
+
+  .Button-content {
+    & > :not(:last-child) {
+      margin-right: var(--primer-control-small-gap, 4px);
+    }
+  }
+}
+
+.Button--large {
+  height: var(--primer-control-large-size, 40px);
+  padding: 0 var(--primer-control-large-paddingInline-normal, 12px);
+  gap: var(--primer-control-large-gap, 8px);
+
+  .Button-label {
+    line-height: var(--primer-text-body-lineHeight-large, calc(48/32));
+  }
+
+  .Button-content {
+    & > :not(:last-child) {
+      margin-right: var(--primer-control-large-gap, 8px);
+    }
+  }
+}
+
+.Button--fullWidth {
+  width: 100%;
+}
+
+/* variants */
+
+/* primary */
+.Button--primary {
+  color: var(--color-btn-primary-text);
+  fill: var(--color-btn-primary-icon);
+  background-color: var(--color-btn-primary-bg);
+  border-color: var(--color-btn-primary-border);
+  box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);
+
+  &:hover {
+    background-color: var(--color-btn-primary-hover-bg);
+    border-color: var(--color-btn-primary-hover-border);
+  }
+
+  /* fallback :focus state */
+  &:focus {
+    @mixin focusOutlineOnEmphasis;
+
+    /* remove fallback :focus if :focus-visible is supported */
+    &:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+  }
+
+  /* default focus state */
+  &:focus-visible {
+    @mixin focusOutlineOnEmphasis;
+  }
+
+  &:active,
+  &[aria-pressed='true'],
+  &.Button--pressed {
+    background-color: var(--color-btn-primary-selected-bg);
+    box-shadow: var(--color-btn-primary-selected-shadow);
+  }
+
+  &:disabled,
+  &.Button--disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-btn-primary-disabled-text);
+    background-color: var(--color-btn-primary-disabled-bg);
+    border-color: var(--color-btn-primary-disabled-border);
+    fill: var(--color-btn-primary-disabled-text);
+  }
+}
+
+/* default (secondary) */
+.Button--secondary {
+  color: var(--color-btn-text);
+  fill: var(--color-fg-muted); /* help this */
+  background-color: var(--color-btn-bg);
+  border-color: var(--color-btn-border);
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+
+  &:hover  {
+    background-color: var(--color-btn-hover-bg);
+    border-color: var(--color-btn-hover-border);
+  }
+
+  &:active,
+  &.Button--active {
+    background-color: var(--color-btn-active-bg);
+    border-color: var(--color-btn-active-border);
+  }
+
+  &[aria-pressed='true'],
+  &.Button--pressed {
+    background-color: var(--color-btn-selected-bg);
+    box-shadow: var(--color-primer-shadow-inset);
+  }
+
+  &:disabled,
+  &.Button--disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
+    fill: var(--color-primer-fg-disabled);
+  }
+}
+
+/* link color without svg */
+.Button--invisible {
+  color: var(--color-fg-default);
+  fill: var(--color-fg-default);
+  border: none;
+
+  &:hover {
+    background-color: var(--color-action-list-item-default-hover-bg);
+  }
+
+  &[aria-pressed='true'],
+  &:active,
+  &.Button--active,
+  &.Button--pressed {
+    background-color: var(--color-action-list-item-default-active-bg);
+    /* box-shadow: var(--color-primer-shadow-inset); */
+  }
+
+  &:disabled,
+  &.Button--disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
+    background-color: var(--color-btn-bg);
+    border-color: var(--color-btn-border);
+    fill: var(--color-primer-fg-disabled);
+  }
+
+  /* if visual is present, muted label color */
+  .Button-label:not(:only-child) {
+    color: var(--color-btn-text);
+  }
+
+  /* if trailingAction is present, muted label color */
+  .Button-content:not(:only-child) {
+    .Button-label {
+      color: var(--color-btn-text);
+    }
+  }
+}
+
+/* danger */
+.Button--danger {
+  color: var(--color-btn-danger-text);
+  fill: var(--color-btn-danger-icon);
+  background-color: var(--color-btn-bg);
+  border-color: var(--color-btn-border);
+  box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);
+
+  &:hover {
+    color: var(--color-btn-danger-hover-text);
+    fill: var(--color-btn-danger-hover-text);
+    background-color: var(--color-btn-danger-hover-bg);
+    border-color: var(--color-btn-danger-hover-border);
+    box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);
+  }
+
+  &:active,
+  &[aria-pressed='true'],
+  &.Button--pressed {
+    color: var(--color-btn-danger-selected-text);
+    fill: var(--color-btn-danger-selected-text);
+    background-color: var(--color-btn-danger-selected-bg);
+    border-color: var(--color-btn-danger-selected-border);
+    box-shadow: var(--color-btn-danger-selected-shadow);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-btn-danger-disabled-text);
+    fill: var(--color-btn-danger-disabled-text);
+    background-color: var(--color-btn-danger-disabled-bg);
+    border-color: var(--color-btn-border);
+  }
+}
+
+.Button--iconOnly {
+  display: grid;
+  place-content: center;
+  padding: unset;
+  width: var(--primer-control-medium-size, 32px);
+
+  &.Button--small {
+    width: var(--primer-control-small-size, 28px);
+  }
+
+  &.Button--large {
+    width: var(--primer-control-large-size, 40px);
+  }
+}

data/app/components/primer/beta/button.rb

@@ -0,0 +1,189 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
+    class Button < Primer::Component
+      status :beta
+
+      DEFAULT_SCHEME = :default
+      LINK_SCHEME = :link
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :primary => "Button--primary",
+        :secondary => "Button--secondary",
+        :default => "Button--secondary",
+        :danger => "Button--danger",
+        :outline => "btn-outline",
+        :invisible => "Button--invisible",
+        LINK_SCHEME => "btn-link"
+      }.freeze
+      SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
+      DEFAULT_SIZE = :medium
+      SIZE_MAPPINGS = {
+        :small => "Button--small",
+        :medium => "Button--medium",
+        :large => "Button--large",
+        DEFAULT_SIZE => "Button--medium"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+      DEFAULT_ALIGN_CONTENT = :center
+      ALIGN_CONTENT_MAPPINGS = {
+        :start => "Button-content--alignStart",
+        :center => "",
+        DEFAULT_ALIGN_CONTENT => ""
+      }.freeze
+      ALIGN_CONTENT_OPTIONS = ALIGN_CONTENT_MAPPINGS.keys
+
+      # Leading visuals appear to the left of the button text.
+      #
+      # Use:
+      #
+      # - `leading_visual_icon` for a <%= link_to_component(Primer::OcticonComponent) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+      renders_one :leading_visual, types: {
+        icon: lambda { |**system_arguments|
+          Primer::OcticonComponent.new(**system_arguments)
+        }
+      }
+
+      # Trailing visuals appear to the right of the button text.
+      #
+      # Use:
+      #
+      # - `trailing_visual_counter` for a <%= link_to_component(Primer::Beta::Counter) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
+      renders_one :trailing_visual, types: {
+        icon: Primer::OcticonComponent,
+        label: Primer::LabelComponent,
+        counter: Primer::CounterComponent
+      }
+
+      # Trailing action appears to the right of the trailing visual.
+      #
+      # Use:
+      #
+      # - `trailing_action_icon` for a <%= link_to_component(Primer::OcticonComponent) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::OcticonComponent) %>.
+      renders_one :trailing_action, types: {
+        icon: Primer::OcticonComponent
+      }
+
+      # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
+      # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.
+      # Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
+      #
+      # @param type [Symbol] (:description) <%= one_of(Primer::Alpha::Tooltip::TYPE_OPTIONS) %>
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Alpha::Tooltip) %>.
+      renders_one :tooltip, lambda { |**system_arguments|
+        raise ArgumentError, "Buttons with a tooltip must have a unique `id` set on the `Button`." if @id.blank? && !Rails.env.production?
+
+        system_arguments[:for_id] = @id
+        system_arguments[:type] ||= :description
+
+        Primer::Alpha::Tooltip.new(**system_arguments)
+      }
+
+      # @example Schemes
+      #   <%= render(Primer::Beta::Button.new) { "Default" } %>
+      #   <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Primary" } %>
+      #   <%= render(Primer::Beta::Button.new(scheme: :danger)) { "Danger" } %>
+      #   <%= render(Primer::Beta::Button.new(scheme: :outline)) { "Outline" } %>
+      #   <%= render(Primer::Beta::Button.new(scheme: :invisible)) { "Invisible" } %>
+      #   <%= render(Primer::Beta::Button.new(scheme: :link)) { "Link" } %>
+      #
+      # @example Sizes
+      #   <%= render(Primer::Beta::Button.new(size: :small)) { "Small" } %>
+      #   <%= render(Primer::Beta::Button.new(size: :medium)) { "Medium" } %>
+      #
+      # @example Block
+      #   <%= render(Primer::Beta::Button.new(block: :true)) { "Block" } %>
+      #   <%= render(Primer::Beta::Button.new(block: :true, scheme: :primary)) { "Primary block" } %>
+      #
+      # @example With leading visual
+      #   <%= render(Primer::Beta::Button.new) do |c| %>
+      #     <% c.with_leading_visual_icon(icon: :star) %>
+      #     Button
+      #   <% end %>
+      #
+      # @example With trailing visual
+      #   <%= render(Primer::Beta::Button.new) do |c| %>
+      #     <% c.with_trailing_visual_counter(count: 15) %>
+      #     Button
+      #   <% end %>
+      #
+      # @example With leading and trailing visuals
+      #   <%= render(Primer::Beta::Button.new) do |c| %>
+      #     <% c.with_leading_visual_icon(icon: :star) %>
+      #     <% c.with_trailing_visual_counter(count: 15) %>
+      #     Button
+      #   <% end %>
+      #
+      # @example With tooltip
+      #   @description
+      #     Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
+      #   @code
+      #     <%= render(Primer::Beta::Button.new(id: "button-with-tooltip")) do |c| %>
+      #       <% c.with_tooltip(text: "Tooltip text") %>
+      #       Button
+      #     <% end %>
+      #
+      # @param scheme [Symbol] <%= one_of(Primer::Beta::Button::SCHEME_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
+      # @param full_width [Boolean] Whether button is full-width with `display: block`.
+      # @param align_content [Symbol] <%= one_of(Primer::Beta::Button::ALIGN_CONTENT_OPTIONS) %>
+      # @param tag [Symbol] (Primer::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
+      # @param type [Symbol] (Primer::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        scheme: DEFAULT_SCHEME,
+        size: DEFAULT_SIZE,
+        full_width: false,
+        align_content: DEFAULT_ALIGN_CONTENT,
+        **system_arguments
+      )
+        @scheme = scheme
+
+        @system_arguments = system_arguments
+
+        @id = @system_arguments[:id]
+
+        @align_content_classes = class_names(
+          "Button-content",
+          system_arguments[:classes],
+          ALIGN_CONTENT_MAPPINGS[fetch_or_fallback(ALIGN_CONTENT_OPTIONS, align_content, DEFAULT_ALIGN_CONTENT)]
+        )
+
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
+          "Button" => !link?,
+          "Button--fullWidth" => full_width
+        )
+      end
+
+      private
+
+      def link?
+        @scheme == LINK_SCHEME
+      end
+
+      def trimmed_content
+        return if content.blank?
+
+        trimmed_content = content.strip
+
+        return trimmed_content unless content.html_safe?
+
+        # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
+        trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
+      end
+    end
+  end
+end

data/app/components/primer/beta/icon_button.html.erb

@@ -0,0 +1,6 @@
+<%= render Primer::ConditionalWrapper.new(condition: render_tooltip?, tag: :div, classes: "Button-withTooltip") do %>
+  <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
+    <%= render Primer::OcticonComponent.new(icon: @icon, classes: "Button-visual") %>
+  <% end -%>
+  <%= render Primer::Alpha::Tooltip.new(**@tooltip_arguments) if render_tooltip? %>
+<% end %>

data/app/components/primer/beta/icon_button.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `IconButton` to render Icon-only buttons without the default button styles.
+    #
+    # `IconButton` will always render with a tooltip unless the tag is `:summary`.
+    # `IconButton` will always render with a tooltip unless the tag is `:summary`.
+    # @accessibility
+    #   `IconButton` requires an `aria-label`, which will provide assistive technologies with an accessible label.
+    #   The `aria-label` should describe the action to be invoked rather than the icon itself. For instance,
+    #   if your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be
+    #   `"Search"` instead of `"Magnifying glass"`.
+    #   Either `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.
+    #   Either `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.
+    #   [Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)
+    class IconButton < Primer::Component
+      status :beta
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "Button--secondary",
+        :danger => "Button--danger",
+        :invisible => "Button--invisible"
+      }.freeze
+      SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
+
+      # @example Default
+      #
+      #   <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search", id: "search-button", id: "search-button")) %>
+      #
+      # @example Schemes
+      #
+      #   <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search")) %>
+      #   <%= render(Primer::Beta::IconButton.new(icon: :trash, "aria-label": "Delete", scheme: :danger)) %>
+      #
+      # @example With an `aria-description`
+      #   @description
+      #     If you need to have a longer description for the icon button, use both the `aria-label` and `aria-description`
+      #     attributes. A label should be short and concise, while the description can be longer as it is intended to provide
+      #     more context and information. See the accessibility section for more information.
+      #   @code
+      #     <%= render(Primer::Beta::IconButton.new(icon: :bold, "aria-label": "Bold", "aria-description": "Add bold text, Cmd+b")) %>
+      #
+      # @example Custom tooltip direction
+      #
+      #   <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
+      #
+      # @param icon [String] Name of <%= link_to_octicons %> to use.
+      # @param scheme [Symbol] <%= one_of(Primer::Beta::IconButton::SCHEME_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
+      # @param tag [Symbol] <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
+      # @param type [Symbol] <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
+      # @param aria-label [String] String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information.
+      # @param aria-description [String] String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information.
+      # @param tooltip_direction [Symbol] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(icon:, scheme: DEFAULT_SCHEME, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
+        @icon = icon
+
+        @system_arguments = system_arguments
+        @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
+
+        @system_arguments[:classes] = class_names(
+          "Button",
+          "Button--iconOnly",
+          SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
+          Primer::Beta::Button::SIZE_MAPPINGS[fetch_or_fallback(Primer::Beta::Button::SIZE_OPTIONS, size, Primer::Beta::Button::DEFAULT_SIZE)],
+          system_arguments[:classes]
+        )
+
+        validate_aria_label
+
+        @aria_label = aria("label", @system_arguments)
+        @aria_description = aria("description", @system_arguments)
+
+        @tooltip_arguments = {
+          for_id: @system_arguments[:id],
+          direction: tooltip_direction
+        }
+
+        # If we have both an `aria-label` and a `aria-description`, we create a `Tooltip` with the description type and keep the `aria-label` in the button.
+        # Otherwise, the `aria-label` is used as the tooltip text, which is the `aria-labelled-by` of the button, so we don't set it in the button.
+        if @aria_label.present? && @aria_description.present?
+          @system_arguments.delete(:"aria-description")
+          @system_arguments[:aria].delete(:description) if @system_arguments.include?(:aria)
+          @tooltip_arguments[:text] = @aria_description
+          @tooltip_arguments[:type] = :description
+        else
+          @system_arguments.delete(:"aria-label")
+          @system_arguments[:aria].delete(:label) if @system_arguments.include?(:aria)
+          @tooltip_arguments[:text] = @aria_label
+          @tooltip_arguments[:type] = :label
+        end
+      end
+
+      private
+
+      def render_tooltip?
+        @system_arguments[:tag] != :summary
+      end
+    end
+  end
+end

data/app/components/primer/clipboard_copy_component.ts

@@ -32,7 +32,7 @@ function showCheck(button: HTMLElement) {
 
 const clipboardCopyElementTimers = new WeakMap<HTMLElement, number>()
 
-document.addEventListener('clipboard-copy', function({target}) {
+document.addEventListener('clipboard-copy', function ({target}) {
   if (!(target instanceof HTMLElement)) return
   if (!target.hasAttribute('data-view-component')) return
 

data/app/components/primer/experimental/action-bar-element.d.ts

@@ -0,0 +1,14 @@
+import type { ActionMenuElement } from './action-menu-element';
+export declare class ActionBarElement extends HTMLElement {
+    #private;
+    items: HTMLElement[];
+    menuItems: HTMLElement[];
+    moreMenu: ActionMenuElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface Window {
+        ActionBarElement: typeof ActionBarElement;
+    }
+}