primer_view_components 0.0.90 → 0.0.91

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f079d925b24963e9bd620728b3514d76d157518370c20c5b9b21b5b1ce517664
-  data.tar.gz: a7bca2db6f7c246431f53356669726b9baf76c48bfd6c466de7e2741bff96454
+  metadata.gz: 968358f568de903663f771e64cd155951a91a1c61d5ddece836599b18dcf7098
+  data.tar.gz: 3d1d9b74914fd53dff67b0d4bb8071321e9d29cc5ddca96e14dce72ebe61a529
 SHA512:
-  metadata.gz: ff22601c1fb98a993117768ee98567dcfbd50de892988661fa16dae420e8c469ec6aa444ae86f404185a43fa8f1aeab9182bb32f818dd45c457866fdbc2ca930
-  data.tar.gz: c67a3dbdb631364a41d379a8f9705a126b6f5c0f0e0ca8c922cbc5aca931e11812247f6ca767c546b865ada421c8b15380f96b047fbb78bfcef8d7ed698b49b5
+  metadata.gz: c6bde4597bc70d55ccbcdb1bd41fc5925c19f6a6edff4c4bae4e93f81b85ddd7ecff84de174f3d1037f5329e6f48a0c332e6c01329b83fdb233e8581a2579575
+  data.tar.gz: 74d4f0db0db3113e04175e650080f70ac9364a51fd0465b3656f0f331943f0420a0b1ea0dd4487d359c47b2ba53524cf3dc4d7edf6a59b8f84fa57627265041a

data/CHANGELOG.md

@@ -1,5 +1,23 @@
 # CHANGELOG
 
+## 0.0.91
+
+### Patch Changes
+
+- [#1280](https://github.com/primer/view_components/pull/1280) [`1337cd47`](https://github.com/primer/view_components/commit/1337cd471cb26eda8813ec7c508a0f19e7d0309b) Thanks [@mxriverlynn](https://github.com/mxriverlynn)! - moving Primer::DetailsComponent to Primer::Beta::Details, and replacing the original with a deprecated component for backward compatibility
+
+* [#1303](https://github.com/primer/view_components/pull/1303) [`16204453`](https://github.com/primer/view_components/commit/1620445358b7dbc482fa371ac9df8a221f00ca90) Thanks [@mxriverlynn](https://github.com/mxriverlynn)! - moving Primer::Alpha::HiddenTextExpander to Primer::Alpha::HiddenTextExpander and replacing the original with a deprecated version
+
+- [#1314](https://github.com/primer/view_components/pull/1314) [`9aef2dcb`](https://github.com/primer/view_components/commit/9aef2dcb4164e0a92f160c49ab40dd74fb24c8ff) Thanks [@camertron](https://github.com/camertron)! - Instruct terser to not mangle class names so Catalyst works
+
+* [#1306](https://github.com/primer/view_components/pull/1306) [`5e9003eb`](https://github.com/primer/view_components/commit/5e9003eb32740c7a18864f2e6d7d51642e31d615) Thanks [@khiga8](https://github.com/khiga8)! - Update docs to discourage standalone tooltip use.
+
+- [#1308](https://github.com/primer/view_components/pull/1308) [`b773b71c`](https://github.com/primer/view_components/commit/b773b71cbcecc20c04a835efc24e0dca0995b118) Thanks [@joelhawksley](https://github.com/joelhawksley)! - Update ViewComponent dependency to fix failing integration tests.
+
+* [#1297](https://github.com/primer/view_components/pull/1297) [`c684d071`](https://github.com/primer/view_components/commit/c684d0718b571d47cd508f3865237743c48172ee) Thanks [@mxriverlynn](https://github.com/mxriverlynn)! - migrating Primer::HeadingComponent to Primer::Beta::Heading, and replacing original with deprecated version
+
+- [#1316](https://github.com/primer/view_components/pull/1316) [`6241f130`](https://github.com/primer/view_components/commit/6241f1307f4b46cce23981b5a1916c424a700d4c) Thanks [@jonrohan](https://github.com/jonrohan)! - Creating a primer_view_components.css bundle that will ship with the npm package
+
 ## 0.0.90
 
 ### Patch Changes

data/app/assets/styles/primer_view_components.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"primer_view_components.css"}

data/app/components/primer/alpha/hidden_text_expander.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `HiddenTextExpander` to indicate and toggle hidden text.
+    #
+    # @accessibility
+    #   `HiddenTextExpander` requires an `aria-label`, which will provide assistive technologies with an accessible label.
+    #   The `aria-label` should describe the action to be invoked by the `HiddenTextExpander`. For instance,
+    #   if your `HiddenTextExpander` expands a list of 5 comments, the `aria-label` should be
+    #   `"Expand 5 more comments"` instead of `"More"`.
+    class HiddenTextExpander < Primer::Component
+      status :alpha
+
+      # @example Default
+      #   <%= render(Primer::Alpha::HiddenTextExpander.new("aria-label": "No effect")) %>
+      #
+      # @example Inline
+      #   <%= render(Primer::Alpha::HiddenTextExpander.new(inline: true, "aria-label": "No effect")) %>
+      #
+      # @example Styling the button
+      #   <%= render(Primer::Alpha::HiddenTextExpander.new("aria-label": "No effect", button_arguments: { p: 1, classes: "custom-class" })) %>
+      #
+      # @param inline [Boolean] Whether or not the expander is inline.
+      # @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(inline: false, button_arguments: {}, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @button_arguments = button_arguments
+
+        @system_arguments[:tag] = :span
+        @system_arguments[:classes] = class_names(
+          "hidden-text-expander",
+          @system_arguments[:classes],
+          "inline" => inline
+        )
+
+        aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
+        if aria_label.present?
+          @button_arguments[:"aria-label"] = aria_label
+          @system_arguments[:aria]&.delete(:label)
+        end
+
+        @button_arguments[:classes] = class_names(
+          "ellipsis-expander",
+          button_arguments[:classes]
+        )
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) do
+          render(Primer::HellipButton.new(**@button_arguments))
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/segmented-control-element.d.ts

@@ -0,0 +1,8 @@
+export default class SegmentedControlElement extends HTMLElement {
+    constructor();
+}
+declare global {
+    interface Window {
+        SegmentedControlElement: typeof SegmentedControlElement;
+    }
+}

data/app/components/primer/alpha/segmented-control-element.js

@@ -0,0 +1,28 @@
+/* eslint-disable custom-elements/no-constructor */
+export default class SegmentedControlElement extends HTMLElement {
+    constructor() {
+        super();
+        this.addEventListener('click', (event) => {
+            var _a, _b;
+            const controls = Array.from(this.querySelectorAll('ul button')).filter(tab => tab instanceof HTMLElement && tab.closest(this.tagName) === this);
+            if (!(event.target instanceof Element))
+                return;
+            if (event.target.closest(this.tagName) !== this)
+                return;
+            const selectedControl = event.target.closest('button');
+            if (!(selectedControl instanceof HTMLElement) || !selectedControl.closest('ul'))
+                return;
+            for (const control of controls) {
+                (_a = control.closest('li')) === null || _a === void 0 ? void 0 : _a.classList.remove('SegmentedControl-item--selected');
+                control.setAttribute('aria-current', 'false');
+            }
+            (_b = selectedControl.closest('li')) === null || _b === void 0 ? void 0 : _b.classList.add('SegmentedControl-item--selected');
+            selectedControl.setAttribute('aria-current', 'true');
+            selectedControl.focus();
+        });
+    }
+}
+if (!window.customElements.get('segmented-control')) {
+    window.SegmentedControlElement = SegmentedControlElement;
+    window.customElements.define('segmented-control', SegmentedControlElement);
+}

data/app/components/primer/alpha/tooltip.rb

@@ -2,82 +2,101 @@
 
 module Primer
   module Alpha
-    # `Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text.
-    # Use tooltips sparingly and as a last resort.
-    #
-    # When using a tooltip, follow the provided guidelines to avoid accessibility issues.
-    #
-    # - Tooltip text should be brief and to the point. The tooltip content must be a string.
-    # - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never
-    #  use tooltips to convey critical information.
+    # `Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text. Use tooltips sparingly and as a last resort.
+    # Use tooltips as a last resort. Please consider [Tooltips alternatives](https://primer.style/design/accessibility/tooltip-alternatives).
     #
+    # When using a tooltip, follow the provided guidelines to avoid accessibility issues:
+    # - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.
+    # - `Tooltip` should be rendered through the API of <%= link_to_component(Primer::ButtonComponent)%>, <%= link_to_component(Primer::LinkComponent)%>, or <%= link_to_component(Primer::IconButton)%>. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).
     # @accessibility
-    #   - **Never set tooltips on static elements.** Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only users
-    #   and screen reader users.
-    #   - Place `Tooltip` adjacent after its trigger element in the DOM. This allows screen reader users to navigate to and copy the tooltip
+    #   - Tooltip text must be brief and concise whether it is a label or a description.
+    #   - Tooltip can only hold string content.
+    #   - **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only users
+    #   and screen reader users. Use of tooltip through <%= link_to_component(Primer::ButtonComponent) %>, <%= link_to_component(Primer::LinkComponent) %>, or <%= link_to_component(Primer::IconButton) %> will guarantee this.
+    #   - If you must use `Tooltip` as a standalone component, place it adjacent after the trigger element in the DOM. This allows screen reader users to navigate to and copy the tooltip
     #   content.
-    #   ### Which `type` should I set?
-    #   Setting `:description` establishes an `aria-describedby` relationship, while `:label` establishes an `aria-labelledby` relationship between the trigger element and the tooltip,
-    #
-    #   The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:
-    #   - When there is already a visible label text on the trigger element, the tooltip is likely intended to supplement the existing text, so set `type: :description`.
+    #   ### Which type should I set?
+    #   Semantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a
+    #   `aria-labelledby` or an `aria-describedby` association. The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:
+    #   - When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set `type: :description`.
     #   The majority of tooltips will fall under this category.
     #   - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
-    #   This type is usually only appropriate for an icon-only control.
+    #   `label` type is usually only appropriate for an icon-only control.
     class Tooltip < Primer::Component
       DIRECTION_DEFAULT = :s
       DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :n, :e, :w, :ne, :nw, :se, :sw].freeze
 
       TYPE_FALLBACK = :description
       TYPE_OPTIONS = [:label, :description].freeze
-      # @example As a description for an icon-only button
+      # @example As a supplementary description for a button
       #   @description
-      #     If the tooltip content provides supplementary description, set `type: :description` to establish an `aria-describedby` relationship.
-      #     The trigger element should also have a _concise_ accessible label via `aria-label`.
+      #     In this example, the button has a visible label text, "Save". `type: :description` is set because the tooltip content is supplementary.
+      #     A screen reader user who encounters this button will hear the accessible name, "Save" followed by the accessible description, "This will immediately impact all organization members".
       #   @code
-      #     <%= render(Primer::IconButton.new(id: "bold-button-0", icon: :bold, "aria-label": "Bold")) %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "bold-button-0", type: :description, text: "Add bold text", direction: :ne)) %>
-      # @example As a label for an icon-only button
+      #     <%= render(Primer::ButtonComponent.new(id: "save-button")) do |c| %>
+      #       <% c.with_tooltip(text: "This will immediately impact all organization members", type: :description, direction: :ne) %>
+      #       Save
+      #     <% end %>
+      # @example As a label for an `IconButton`
       #   @description
-      #     If the tooltip labels the icon-only button, set `type: :label`. This tooltip content becomes the accessible name for the button.
+      #     An `IconButton` of `tag: :button` and `tag: :a` will render a tooltip using the `aria-label` content by default. While tooltips should generally be avoided, a tooltip on an `IconButton`
+      #     has usability benefits because it provides a textual label for sighted users.
+      #     A screen reader user who encounters the following button will hear the accessible name, "Bold".
       #   @code
-      #     <%= render(Primer::ButtonComponent.new(id: "like-button")) { "👍" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "like-button", type: :label, text: "Like", direction: :n)) %>
-      #
-      # @example As a description for a button with visible label
+      #     <%= render(Primer::IconButton.new(id: "bold-button-0", icon: :bold, "aria-label": "Bold")) %>
+      # @example As a supplementary description for an `IconButton`
       #   @description
-      #     If the button already has visible label text, the tooltip content is likely supplementary so set `type: :description`.
+      #     If you want to provide a description for the `IconButton`, set both `aria-label` and `aria-description` text. The tooltip will use the `aria-description` text.
+      #     A screen reader user who encounters the following button will hear the accessible name "Search", followed by the accessible description "Use keywords like 'repo:' and 'org:' in your query".
       #   @code
-      #     <%= render(Primer::ButtonComponent.new(id: "save-button", scheme: :primary)) { "Save" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "save-button", type: :description, text: "This will immediately impact all organization members", direction: :ne)) %>
+      #     <%= render(Primer::IconButton.new(id: "search-button", icon: :search, "aria-label": "Search", "aria-description": "Use keywords like 'repo:' and 'org:' in your query")) %>
+      #
       # @example With direction
       #   @description
       #     Set direction of tooltip with `direction`. The tooltip is responsive and will automatically adjust direction to avoid cutting off.
       #   @code
-      #     <%= render(Primer::ButtonComponent.new(id: "North", m: 2)) { "North" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "North", type: :description, text: "This is a North-facing tooltip, and is responsive.", direction: :n)) %>
-      #     <%= render(Primer::ButtonComponent.new(id: "South", m: 2)) { "South" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "South", type: :description, text: "This is a South-facing tooltip and is responsive.", direction: :s)) %>
-      #     <%= render(Primer::ButtonComponent.new(id: "East", m: 2)) { "East" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "East", type: :description, text: "This is a East-facing tooltip and is responsive.", direction: :e)) %>
-      #     <%= render(Primer::ButtonComponent.new(id: "West", m: 2)) { "West" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "West", type: :description, text: "This is a West-facing tooltip and is responsive.", direction: :w)) %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Northeast", m: 2)) { "Northeast" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "Northeast", type: :description, text: "This is a Northeast-facing tooltip and is responsive.", direction: :ne)) %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Southeast", m: 2)) { "Southeast" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "Southeast", type: :description, text: "This is a Southeast-facing tooltip and is responsive.", direction: :se)) %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Northwest", m: 2)) { "Northwest" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "Northwest", type: :description, text: "This is a Northwest-facing tooltip and is responsive.", direction: :nw)) %>
-      #     <%= render(Primer::ButtonComponent.new(id: "Southwest", m: 2)) { "Southwest" } %>
-      #     <%= render(Primer::Alpha::Tooltip.new(for_id: "Southwest", type: :description, text: "This is a Southwest-facing tooltip and is responsive.", direction: :sw)) %>
-      # @example With relative parent
+      #     <%= render(Primer::ButtonComponent.new(id: "North", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a North-facing tooltip, and is responsive.", type: :description, direction: :n) %>
+      #       North
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "South", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a South-facing tooltip, and is responsive.", type: :description, direction: :s) %>
+      #       South
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "East", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a East-facing tooltip, and is responsive.", type: :description, direction: :e) %>
+      #       East
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "West", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a West-facing tooltip, and is responsive.", type: :description, direction: :w) %>
+      #       West
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Northwest", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a Northwest-facing tooltip, and is responsive.", type: :description, direction: :nw) %>
+      #       Northwest
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Southwest", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a Southwest-facing tooltip, and is responsive.", type: :description, direction: :sw) %>
+      #       Southwest
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Northeast", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a Northeast-facing tooltip, and is responsive.", type: :description, direction: :ne) %>
+      #       Northeast
+      #     <% end %>
+      #     <%= render(Primer::ButtonComponent.new(id: "Southeast", m: 2)) do |c| %>
+      #       <% c.with_tooltip(text: "This is a Southeast-facing tooltip, and is responsive.", type: :description, direction: :se) %>
+      #       Southeast
+      #     <% end %>
+      # @example Directly using `Tooltip`
       #   @description
-      #     When the tooltip and trigger element have a parent container with `relative: position`, it should not affect width of the tooltip.
+      #     When you have a valid tooltip usecase for an interactive element that is not one of the supported components, you may need to use the `Tooltip` component directly.
+      #     The tooltip should be placed directly adjacent after the element you are associating it with.
+      #     The tooltip is absolutely positioned so ensure there is a wrapper with `position: relative` to avoid positioning issues.
       #   @code
-      #     <span style="position: relative;">
-      #       <%= render(Primer::ButtonComponent.new(id: "test-button", scheme: :primary)) { "Test" } %>
+      #     <div style="position: relative;">
+      #       <button type="button" id="test-button">Test</button>
       #       <%= render(Primer::Alpha::Tooltip.new(for_id: "test-button", type: :description, text: "This tooltip should take up the full width", direction: :ne)) %>
-      #     </span>
+      #     </div>
       # @param for_id [String] The ID of the element that the tooltip should be attached to.
       # @param type [Symbol] <%= one_of(Primer::Alpha::Tooltip::TYPE_OPTIONS) %>
       # @param direction [Symbol] <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>

data/app/components/primer/base_component.rb

@@ -14,7 +14,7 @@ module Primer
   # For example:
   #
   # ```erb
-  # <%= render Primer::HeadingComponent.new(mt: [0, nil, nil, 4, 2]) do %>
+  # <%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>
   #   Hello world
   # <% end %>
   # ```

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

@@ -46,14 +46,14 @@ module Primer
 
       # Required heading.
       #
-      # @param tag [String]  <%= one_of(Primer::HeadingComponent::TAG_OPTIONS) %>
+      # @param tag [String]  <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :heading, lambda { |tag:, **system_arguments|
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = tag
         system_arguments[:classes] = class_names("blankslate-heading", system_arguments[:classes])
 
-        Primer::HeadingComponent.new(**system_arguments)
+        Primer::Beta::Heading.new(**system_arguments)
       }
 
       # Optional description.

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

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `DetailsComponent` to reveal content after clicking a button.
+    class Details < Primer::Component
+      status :beta
+
+      BODY_TAG_DEFAULT = :div
+      BODY_TAG_OPTIONS = [:ul, :"details-menu", :"details-dialog", BODY_TAG_DEFAULT].freeze
+      NO_OVERLAY = :none
+      OVERLAY_MAPPINGS = {
+        NO_OVERLAY => "",
+        :default => "details-overlay",
+        :dark => "details-overlay details-overlay-dark"
+      }.freeze
+
+      # Use the Summary slot as a trigger to reveal the content.
+      #
+      # @param button [Boolean] (true) Whether to render the Summary as a button or not.
+      # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
+      renders_one :summary, lambda { |button: true, **system_arguments|
+        system_arguments[:tag] = :summary
+        system_arguments[:role] = "button"
+
+        return Primer::BaseComponent.new(**system_arguments) unless button
+
+        Primer::ButtonComponent.new(**system_arguments)
+      }
+
+      # Use the Body slot as the main content to be shown when triggered by the Summary.
+      #
+      # @param tag [Symbol] (Primer::Beta::Details::BODY_TAG_DEFAULT) <%= one_of(Primer::Beta::Details::BODY_TAG_OPTIONS) %>
+      # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
+      renders_one :body, lambda { |tag: BODY_TAG_DEFAULT, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(BODY_TAG_OPTIONS, tag, BODY_TAG_DEFAULT)
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #
+      #   <%= render Primer::Beta::Details.new do |c| %>
+      #     <% c.with_summary do %>
+      #       Summary
+      #     <% end %>
+      #     <% c.with_body do %>
+      #       Body
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
+      # @param reset [Boolean] Defaults to false. If set to true, it will remove the default caret and remove style from the summary element
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(overlay: NO_OVERLAY, reset: false, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :details
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          OVERLAY_MAPPINGS[fetch_or_fallback(OVERLAY_MAPPINGS.keys, overlay, NO_OVERLAY)],
+          "details-reset" => reset
+        )
+      end
+
+      def render?
+        summary.present? && body.present?
+      end
+    end
+  end
+end

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

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `Heading` should be used to communicate page organization and hierarchy.
+    #
+    # - Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is appropriate for the page context.
+    # - Use `Heading` as the title of a section or sub section.
+    # - Do not use `Heading` for styling alone. For simply styling text, consider using <%= link_to_component(Primer::Beta::Text) %> with relevant <%= link_to_typography_docs %>
+    #   such as `font_size` and `font_weight`.
+    # - Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should increase by one in ascending order.
+    #
+    # @accessibility
+    #   While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out.
+    #   When text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be
+    #   consistent. [See WCAG success criteria: 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)
+    #
+    #   Headings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.
+    #   <%= link_to_heading_practices %>
+    class Heading < Primer::Component
+      status :beta
+
+      TAG_FALLBACK = :h2
+      TAG_OPTIONS = [:h1, TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
+
+      # @example Default
+      #   <%= render(Primer::Beta::Heading.new(tag: :h1)) { "H1 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h2)) { "H2 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h3)) { "H3 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h4)) { "H4 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h5)) { "H5 Text" } %>
+      #   <%= render(Primer::Beta::Heading.new(tag: :h6)) { "H6 Text" } %>
+      #
+      # @param tag [String]  <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(tag:, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_FALLBACK)
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

data/app/components/primer/details_component.rb

@@ -1,68 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `DetailsComponent` to reveal content after clicking a button.
-  class DetailsComponent < Primer::Component
-    status :beta
-
-    BODY_TAG_DEFAULT = :div
-    BODY_TAG_OPTIONS = [:ul, :"details-menu", :"details-dialog", BODY_TAG_DEFAULT].freeze
-    NO_OVERLAY = :none
-    OVERLAY_MAPPINGS = {
-      NO_OVERLAY => "",
-      :default => "details-overlay",
-      :dark => "details-overlay details-overlay-dark"
-    }.freeze
-
-    # Use the Summary slot as a trigger to reveal the content.
-    #
-    # @param button [Boolean] (true) Whether to render the Summary as a button or not.
-    # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
-    renders_one :summary, lambda { |button: true, **system_arguments|
-      system_arguments[:tag] = :summary
-      system_arguments[:role] = "button"
-
-      return Primer::BaseComponent.new(**system_arguments) unless button
-
-      Primer::ButtonComponent.new(**system_arguments)
-    }
-
-    # Use the Body slot as the main content to be shown when triggered by the Summary.
-    #
-    # @param tag [Symbol] (Primer::DetailsComponent::BODY_TAG_DEFAULT) <%= one_of(Primer::DetailsComponent::BODY_TAG_OPTIONS) %>
-    # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
-    renders_one :body, lambda { |tag: BODY_TAG_DEFAULT, **system_arguments|
-      system_arguments[:tag] = fetch_or_fallback(BODY_TAG_OPTIONS, tag, BODY_TAG_DEFAULT)
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # @example Default
-    #
-    #   <%= render Primer::DetailsComponent.new do |c| %>
-    #     <% c.with_summary do %>
-    #       Summary
-    #     <% end %>
-    #     <% c.with_body do %>
-    #       Body
-    #     <% end %>
-    #   <% end %>
-    #
-    # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
-    # @param reset [Boolean] Defaults to false. If set to true, it will remove the default caret and remove style from the summary element
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(overlay: NO_OVERLAY, reset: false, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @system_arguments[:tag] = :details
-      @system_arguments[:classes] = class_names(
-        system_arguments[:classes],
-        OVERLAY_MAPPINGS[fetch_or_fallback(OVERLAY_MAPPINGS.keys, overlay, NO_OVERLAY)],
-        "details-reset" => reset
-      )
-    end
-
-    def render?
-      summary.present? && body.present?
-    end
+  class DetailsComponent < Primer::Beta::Details
+    status :deprecated
   end
 end

data/app/components/primer/dropdown.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::DetailsComponent.new(**@system_arguments)) do |c| %>
+<%= render(Primer::Beta::Details.new(**@system_arguments)) do |c| %>
   <% c.summary(**@button_arguments) do %>
     <%= button %>
   <% end %>

data/app/components/primer/dropdown.rb

@@ -128,7 +128,7 @@ module Primer
     #     end %>
     #   <% end %>
     #
-    # @param overlay [Symbol] <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
+    # @param overlay [Symbol] <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
     # @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(overlay: :default, with_caret: false, **system_arguments)

data/app/components/primer/dropdown_menu_component.rb

@@ -18,7 +18,7 @@ module Primer
 
     # @example With a header
     #   <div>
-    #     <%= render(Primer::DetailsComponent.new(overlay: :default, reset: true, position: :relative)) do |c| %>
+    #     <%= render(Primer::Beta::Details.new(overlay: :default, reset: true, position: :relative)) do |c| %>
     #       <% c.summary do %>
     #         Dropdown
     #       <% end %>

data/app/components/primer/heading_component.rb

@@ -1,44 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # `Heading` should be used to communicate page organization and hierarchy.
-  #
-  # - Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is appropriate for the page context.
-  # - Use `Heading` as the title of a section or sub section.
-  # - Do not use `Heading` for styling alone. For simply styling text, consider using <%= link_to_component(Primer::Beta::Text) %> with relevant <%= link_to_typography_docs %>
-  #   such as `font_size` and `font_weight`.
-  # - Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should increase by one in ascending order.
-  #
-  # @accessibility
-  #   While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out.
-  #   When text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be
-  #   consistent. [See WCAG success criteria: 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)
-  #
-  #   Headings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.
-  #   <%= link_to_heading_practices %>
-  class HeadingComponent < Primer::Component
-    status :beta
-
-    TAG_FALLBACK = :h2
-    TAG_OPTIONS = [:h1, TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze
-
-    # @example Default
-    #   <%= render(Primer::HeadingComponent.new(tag: :h1)) { "H1 Text" } %>
-    #   <%= render(Primer::HeadingComponent.new(tag: :h2)) { "H2 Text" } %>
-    #   <%= render(Primer::HeadingComponent.new(tag: :h3)) { "H3 Text" } %>
-    #   <%= render(Primer::HeadingComponent.new(tag: :h4)) { "H4 Text" } %>
-    #   <%= render(Primer::HeadingComponent.new(tag: :h5)) { "H5 Text" } %>
-    #   <%= render(Primer::HeadingComponent.new(tag: :h6)) { "H6 Text" } %>
-    #
-    # @param tag [String]  <%= one_of(Primer::HeadingComponent::TAG_OPTIONS) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(tag:, **system_arguments)
-      @system_arguments = system_arguments
-      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_FALLBACK)
-    end
-
-    def call
-      render(Primer::BaseComponent.new(**@system_arguments)) { content }
-    end
+  class HeadingComponent < Primer::Beta::Heading
+    status :deprecated
   end
 end

data/app/components/primer/hidden_text_expander.rb

@@ -1,53 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `HiddenTextExpander` to indicate and toggle hidden text.
-  #
-  # @accessibility
-  #   `HiddenTextExpander` requires an `aria-label`, which will provide assistive technologies with an accessible label.
-  #   The `aria-label` should describe the action to be invoked by the `HiddenTextExpander`. For instance,
-  #   if your `HiddenTextExpander` expands a list of 5 comments, the `aria-label` should be
-  #   `"Expand 5 more comments"` instead of `"More"`.
-  class HiddenTextExpander < Primer::Component
-    # @example Default
-    #   <%= render(Primer::HiddenTextExpander.new("aria-label": "No effect")) %>
-    #
-    # @example Inline
-    #   <%= render(Primer::HiddenTextExpander.new(inline: true, "aria-label": "No effect")) %>
-    #
-    # @example Styling the button
-    #   <%= render(Primer::HiddenTextExpander.new("aria-label": "No effect", button_arguments: { p: 1, classes: "custom-class" })) %>
-    #
-    # @param inline [Boolean] Whether or not the expander is inline.
-    # @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(inline: false, button_arguments: {}, **system_arguments)
-      @system_arguments = deny_tag_argument(**system_arguments)
-      @button_arguments = button_arguments
-
-      @system_arguments[:tag] = :span
-      @system_arguments[:classes] = class_names(
-        "hidden-text-expander",
-        @system_arguments[:classes],
-        "inline" => inline
-      )
-
-      aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
-      if aria_label.present?
-        @button_arguments[:"aria-label"] = aria_label
-        @system_arguments[:aria]&.delete(:label)
-      end
-
-      @button_arguments[:classes] = class_names(
-        "ellipsis-expander",
-        button_arguments[:classes]
-      )
-    end
-
-    def call
-      render(Primer::BaseComponent.new(**@system_arguments)) do
-        render(Primer::HellipButton.new(**@button_arguments))
-      end
-    end
+  class HiddenTextExpander < Primer::Alpha::HiddenTextExpander
+    status :deprecated
   end
 end

data/app/components/primer/icon_button.rb

@@ -3,6 +3,7 @@
 module Primer
   # Use `IconButton` to render Icon-only buttons without the default button styles.
   #
+  # `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,

data/app/components/primer/popover_component.rb

@@ -27,13 +27,13 @@ module Primer
 
     # The heading
     #
-    # @param tag [Symbol] (Primer::PopoverComponent::DEFAULT_HEADING_TAG) <%= one_of(Primer::HeadingComponent::TAG_OPTIONS) %>
+    # @param tag [Symbol] (Primer::PopoverComponent::DEFAULT_HEADING_TAG) <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, **system_arguments|
       system_arguments[:tag] = tag
       system_arguments[:mb] ||= 2
 
-      Primer::HeadingComponent.new(**system_arguments)
+      Primer::Beta::Heading.new(**system_arguments)
     }
 
     # The body

data/app/components/primer/primer.d.ts

@@ -6,3 +6,4 @@ import './local_time';
 import './image_crop';
 import './dropdown';
 import './alpha/tool-tip-element';
+import './alpha/segmented-control-element';

data/app/components/primer/primer.js

@@ -6,3 +6,4 @@ import './local_time';
 import './image_crop';
 import './dropdown';
 import './alpha/tool-tip-element';
+import './alpha/segmented-control-element';

data/app/components/primer/primer.pcss

@@ -0,0 +1 @@
+/* CSS component styles here */

data/app/lib/primer/view_helper.rb

@@ -8,7 +8,7 @@ module Primer
 
     HELPERS = {
       octicon: "Primer::OcticonComponent",
-      heading: "Primer::HeadingComponent",
+      heading: "Primer::Beta::Heading",
       time_ago: "Primer::TimeAgoComponent",
       image: "Primer::Image"
     }.freeze

data/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb

@@ -7,9 +7,12 @@ module ERBLint
       module DeprecatedComponentsHelpers
         # If there is no alternative to suggest, set the value to nil
         COMPONENT_TO_USE_INSTEAD = {
+          "Primer::HiddenTextExpander" => "Primer::Alpha::HiddenTextExpander",
+          "Primer::HeadingComponent" => "Primer::Beta::Heading",
           "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup",
           "Primer::CloseButton" => "Primer::Beta::CloseButton",
           "Primer::CounterComponent" => "Primer::Beta::Counter",
+          "Primer::DetailsComponent" => "Primer::Beta::Details",
           "Primer::Alpha::AutoComplete::Item" => "Primer::Beta::AutoComplete::Item",
           "Primer::Alpha::AutoComplete" => "Primer::Beta::AutoComplete",
           "Primer::BlankslateComponent" => "Primer::Beta::Blankslate",

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 90
+      PATCH = 91
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/rubocop/cop/primer/component_name_migration.rb

@@ -15,6 +15,9 @@ module RuboCop
       # Primer::Beta::ComponentName.new()
       class ComponentNameMigration < BaseCop
         DEPRECATIONS = {
+          "Primer::HiddenTextExpander" => "Primer::Alpha::HiddenTextExpander",
+          "Primer::DetailsComponent" => "Primer::Beta::Details",
+          "Primer::HeadingComponent" => "Primer::Beta::Heading",
           "Primer::BoxComponent" => "Primer::Box",
           "Primer::ButtonGroup" => "Primer::Beta::ButtonGroup",
           "Primer::CloseButton" => "Primer::Beta::CloseButton",

data/lib/tasks/docs.rake

@@ -52,14 +52,14 @@ namespace :docs do
       Primer::ClipboardCopy,
       Primer::Beta::CloseButton,
       Primer::Beta::Counter,
-      Primer::DetailsComponent,
+      Primer::Beta::Details,
       Primer::Dropdown,
       Primer::DropdownMenuComponent,
       Primer::Beta::Flash,
       Primer::FlexComponent,
       Primer::FlexItemComponent,
-      Primer::HeadingComponent,
-      Primer::HiddenTextExpander,
+      Primer::Beta::Heading,
+      Primer::Alpha::HiddenTextExpander,
       Primer::LabelComponent,
       Primer::LayoutComponent,
       Primer::LinkComponent,

data/static/arguments.yml

@@ -22,6 +22,21 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
+- component: HiddenTextExpander
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/hidden_text_expander.rb
+  parameters:
+  - name: inline
+    type: Boolean
+    default: "`false`"
+    description: Whether or not the expander is inline.
+  - name: button_arguments
+    type: Hash
+    default: "`{}`"
+    description: "[System arguments](/system-arguments) for the button element."
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
 - component: Layout
   source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/layout.rb
   parameters:
@@ -521,6 +536,23 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
+- component: Details
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/details.rb
+  parameters:
+  - name: overlay
+    type: Symbol
+    default: "`:none`"
+    description: Dictates the type of overlay to render with. One of `:dark`, `:default`,
+      or `:none`.
+  - name: reset
+    type: Boolean
+    default: "`false`"
+    description: Defaults to false. If set to true, it will remove the default caret
+      and remove style from the summary element
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
 - component: Flash
   source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb
   parameters:
@@ -548,6 +580,17 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
+- component: Heading
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/heading.rb
+  parameters:
+  - name: tag
+    type: String
+    default: N/A
+    description: One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`.
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
 - component: Text
   source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb
   parameters:
@@ -632,23 +675,6 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
-- component: Details
-  source: https://github.com/primer/view_components/tree/main/app/components/primer/details_component.rb
-  parameters:
-  - name: overlay
-    type: Symbol
-    default: "`:none`"
-    description: Dictates the type of overlay to render with. One of `:dark`, `:default`,
-      or `:none`.
-  - name: reset
-    type: Boolean
-    default: "`false`"
-    description: Defaults to false. If set to true, it will remove the default caret
-      and remove style from the summary element
-  - name: system_arguments
-    type: Hash
-    default: N/A
-    description: "[System arguments](/system-arguments)"
 - component: Dropdown
   source: https://github.com/primer/view_components/tree/main/app/components/primer/dropdown.rb
   parameters:
@@ -727,17 +753,6 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
-- component: Heading
-  source: https://github.com/primer/view_components/tree/main/app/components/primer/heading_component.rb
-  parameters:
-  - name: tag
-    type: String
-    default: N/A
-    description: One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`.
-  - name: system_arguments
-    type: Hash
-    default: N/A
-    description: "[System arguments](/system-arguments)"
 - component: HellipButton
   source: https://github.com/primer/view_components/tree/main/app/components/primer/hellip_button.rb
   parameters:
@@ -749,21 +764,6 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
-- component: HiddenTextExpander
-  source: https://github.com/primer/view_components/tree/main/app/components/primer/hidden_text_expander.rb
-  parameters:
-  - name: inline
-    type: Boolean
-    default: "`false`"
-    description: Whether or not the expander is inline.
-  - name: button_arguments
-    type: Hash
-    default: "`{}`"
-    description: "[System arguments](/system-arguments) for the button element."
-  - name: system_arguments
-    type: Hash
-    default: N/A
-    description: "[System arguments](/system-arguments)"
 - component: IconButton
   source: https://github.com/primer/view_components/tree/main/app/components/primer/icon_button.rb
   parameters:

data/static/audited_at.json

@@ -2,6 +2,7 @@
   "Primer::Alpha::AutoComplete": "",
   "Primer::Alpha::AutoComplete::Item": "",
   "Primer::Alpha::ButtonMarketing": "",
+  "Primer::Alpha::HiddenTextExpander": "",
   "Primer::Alpha::Layout": "",
   "Primer::Alpha::Layout::Main": "",
   "Primer::Alpha::Layout::Sidebar": "",
@@ -25,7 +26,9 @@
   "Primer::Beta::ButtonGroup": "",
   "Primer::Beta::CloseButton": "",
   "Primer::Beta::Counter": "",
+  "Primer::Beta::Details": "",
   "Primer::Beta::Flash": "",
+  "Primer::Beta::Heading": "",
   "Primer::Beta::Text": "",
   "Primer::Beta::Truncate": "",
   "Primer::Beta::Truncate::TruncateText": "",

data/static/constants.json

@@ -38,6 +38,8 @@
       "large"
     ]
   },
+  "Primer::Alpha::HiddenTextExpander": {
+  },
   "Primer::Alpha::Layout": {
     "FIRST_IN_SOURCE_DEFAULT": "sidebar",
     "FIRST_IN_SOURCE_OPTIONS": [
@@ -326,6 +328,21 @@
       "secondary"
     ]
   },
+  "Primer::Beta::Details": {
+    "BODY_TAG_DEFAULT": "div",
+    "BODY_TAG_OPTIONS": [
+      "ul",
+      "details-menu",
+      "details-dialog",
+      "div"
+    ],
+    "NO_OVERLAY": "none",
+    "OVERLAY_MAPPINGS": {
+      "none": "",
+      "default": "details-overlay",
+      "dark": "details-overlay details-overlay-dark"
+    }
+  },
   "Primer::Beta::Flash": {
     "DEFAULT_SCHEME": "default",
     "SCHEME_MAPPINGS": {
@@ -335,6 +352,17 @@
       "success": "flash-success"
     }
   },
+  "Primer::Beta::Heading": {
+    "TAG_FALLBACK": "h2",
+    "TAG_OPTIONS": [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6"
+    ]
+  },
   "Primer::Beta::Text": {
     "DEFAULT_TAG": "span"
   },
@@ -393,19 +421,6 @@
   "Primer::CounterComponent": {
   },
   "Primer::DetailsComponent": {
-    "BODY_TAG_DEFAULT": "div",
-    "BODY_TAG_OPTIONS": [
-      "ul",
-      "details-menu",
-      "details-dialog",
-      "div"
-    ],
-    "NO_OVERLAY": "none",
-    "OVERLAY_MAPPINGS": {
-      "none": "",
-      "default": "details-overlay",
-      "dark": "details-overlay details-overlay-dark"
-    }
   },
   "Primer::Dropdown": {
     "Menu": "Primer::Dropdown::Menu"
@@ -521,15 +536,6 @@
     "FLEX_AUTO_DEFAULT": false
   },
   "Primer::HeadingComponent": {
-    "TAG_FALLBACK": "h2",
-    "TAG_OPTIONS": [
-      "h1",
-      "h2",
-      "h3",
-      "h4",
-      "h5",
-      "h6"
-    ]
   },
   "Primer::HellipButton": {
   },

data/static/statuses.json

@@ -2,6 +2,7 @@
   "Primer::Alpha::AutoComplete": "deprecated",
   "Primer::Alpha::AutoComplete::Item": "deprecated",
   "Primer::Alpha::ButtonMarketing": "alpha",
+  "Primer::Alpha::HiddenTextExpander": "alpha",
   "Primer::Alpha::Layout": "alpha",
   "Primer::Alpha::Layout::Main": "alpha",
   "Primer::Alpha::Layout::Sidebar": "alpha",
@@ -25,7 +26,9 @@
   "Primer::Beta::ButtonGroup": "beta",
   "Primer::Beta::CloseButton": "beta",
   "Primer::Beta::Counter": "beta",
+  "Primer::Beta::Details": "beta",
   "Primer::Beta::Flash": "beta",
+  "Primer::Beta::Heading": "beta",
   "Primer::Beta::Text": "beta",
   "Primer::Beta::Truncate": "beta",
   "Primer::Beta::Truncate::TruncateText": "alpha",
@@ -40,16 +43,16 @@
   "Primer::ConditionalWrapper": "alpha",
   "Primer::Content": "stable",
   "Primer::CounterComponent": "deprecated",
-  "Primer::DetailsComponent": "beta",
+  "Primer::DetailsComponent": "deprecated",
   "Primer::Dropdown": "alpha",
   "Primer::Dropdown::Menu": "alpha",
   "Primer::Dropdown::Menu::Item": "alpha",
   "Primer::DropdownMenuComponent": "deprecated",
   "Primer::FlexComponent": "deprecated",
   "Primer::FlexItemComponent": "deprecated",
-  "Primer::HeadingComponent": "beta",
+  "Primer::HeadingComponent": "deprecated",
   "Primer::HellipButton": "alpha",
-  "Primer::HiddenTextExpander": "alpha",
+  "Primer::HiddenTextExpander": "deprecated",
   "Primer::IconButton": "beta",
   "Primer::Image": "alpha",
   "Primer::ImageCrop": "alpha",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.90
+  version: 0.0.91
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-08-11 00:00:00.000000000 Z
+date: 2022-08-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -406,12 +406,17 @@ files:
 - README.md
 - app/assets/javascripts/primer_view_components.js
 - app/assets/javascripts/primer_view_components.js.map
+- app/assets/styles/primer_view_components.css
+- app/assets/styles/primer_view_components.css.map
 - app/components/primer/alpha/auto_complete.rb
 - app/components/primer/alpha/auto_complete/auto_complete.html.erb
 - app/components/primer/alpha/auto_complete/item.rb
 - app/components/primer/alpha/button_marketing.rb
+- app/components/primer/alpha/hidden_text_expander.rb
 - app/components/primer/alpha/layout.html.erb
 - app/components/primer/alpha/layout.rb
+- app/components/primer/alpha/segmented-control-element.d.ts
+- app/components/primer/alpha/segmented-control-element.js
 - app/components/primer/alpha/tab_nav.html.erb
 - app/components/primer/alpha/tab_nav.rb
 - app/components/primer/alpha/tab_panels.html.erb
@@ -449,8 +454,11 @@ files:
 - app/components/primer/beta/button_group.rb
 - app/components/primer/beta/close_button.rb
 - app/components/primer/beta/counter.rb
+- app/components/primer/beta/details.html.erb
+- app/components/primer/beta/details.rb
 - app/components/primer/beta/flash.html.erb
 - app/components/primer/beta/flash.rb
+- app/components/primer/beta/heading.rb
 - app/components/primer/beta/text.rb
 - app/components/primer/beta/truncate.html.erb
 - app/components/primer/beta/truncate.rb
@@ -472,7 +480,6 @@ files:
 - app/components/primer/conditional_wrapper.rb
 - app/components/primer/content.rb
 - app/components/primer/counter_component.rb
-- app/components/primer/details_component.html.erb
 - app/components/primer/details_component.rb
 - app/components/primer/dropdown.d.ts
 - app/components/primer/dropdown.html.erb
@@ -520,6 +527,7 @@ files:
 - app/components/primer/popover_component.rb
 - app/components/primer/primer.d.ts
 - app/components/primer/primer.js
+- app/components/primer/primer.pcss
 - app/components/primer/primer.ts
 - app/components/primer/progress_bar_component.html.erb
 - app/components/primer/progress_bar_component.rb