openproject-primer_view_components 0.18.1 → 0.20.0

data/app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -12,6 +12,17 @@ type SelectedItem = {
 const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
 const menuItemSelectors = validSelectors.map(selector => `:not([hidden]) > ${selector}`)
 
+export type ItemActivatedEvent = {
+  item: Element
+  checked: boolean
+}
+
+declare global {
+  interface HTMLElementEventMap {
+    itemActivated: CustomEvent<ItemActivatedEvent>
+  }
+}
+
 @controller
 export class ActionMenuElement extends HTMLElement {
   @target
@@ -82,7 +93,7 @@ export class ActionMenuElement extends HTMLElement {
       results.push({
         label: labelEl?.textContent,
         value: selectedItem?.getAttribute('data-value'),
-        element: selectedItem
+        element: selectedItem,
       })
     }
 
@@ -96,41 +107,46 @@ export class ActionMenuElement extends HTMLElement {
     this.addEventListener('mouseover', this, {signal})
     this.addEventListener('focusout', this, {signal})
     this.addEventListener('mousedown', this, {signal})
+    this.popoverElement?.addEventListener('toggle', this, {signal})
     this.#setDynamicLabel()
     this.#updateInput()
     this.#softDisableItems()
 
     if (this.includeFragment) {
       this.includeFragment.addEventListener('include-fragment-replaced', this, {
-        signal
+        signal,
       })
     }
   }
 
+  disconnectedCallback() {
+    this.#abortController.abort()
+  }
+
   #softDisableItems() {
     const {signal} = this.#abortController
 
-    for (const item of this.#items) {
+    for (const item of this.querySelectorAll(validSelectors.join(','))) {
       item.addEventListener('click', this.#potentiallyDisallowActivation.bind(this), {signal})
       item.addEventListener('keydown', this.#potentiallyDisallowActivation.bind(this), {signal})
     }
   }
 
-  #potentiallyDisallowActivation(event: Event) {
-    if (!this.#isActivation(event)) return
+  // returns true if activation was prevented
+  #potentiallyDisallowActivation(event: Event): boolean {
+    if (!this.#isActivation(event)) return false
 
     const item = (event.target as HTMLElement).closest(menuItemSelectors.join(','))
-    if (!item) return
+    if (!item) return false
 
     if (item.getAttribute('aria-disabled')) {
       event.preventDefault()
       event.stopPropagation()
       event.stopImmediatePropagation()
+      return true
     }
-  }
 
-  disconnectedCallback() {
-    this.#abortController.abort()
+    return false
   }
 
   #isKeyboardActivation(event: Event): boolean {
@@ -167,6 +183,10 @@ export class ActionMenuElement extends HTMLElement {
     const targetIsInvoker = this.invokerElement?.contains(event.target as HTMLElement)
     const eventIsActivation = this.#isActivation(event)
 
+    if (event.type === 'toggle' && (event as ToggleEvent).newState === 'open') {
+      this.#firstItem?.focus()
+    }
+
     if (targetIsInvoker && event.type === 'mousedown') {
       this.#invokerBeingClicked = true
       return
@@ -202,6 +222,8 @@ export class ActionMenuElement extends HTMLElement {
     const targetIsItem = item !== null
 
     if (targetIsItem && eventIsActivation) {
+      if (this.#potentiallyDisallowActivation(event)) return
+
       const dialogInvoker = item.closest('[data-show-dialog-id]')
 
       if (dialogInvoker) {
@@ -214,7 +236,7 @@ export class ActionMenuElement extends HTMLElement {
       }
 
       this.#activateItem(event, item)
-      this.#handleItemActivated(event, item)
+      this.#handleItemActivated(item)
 
       // Pressing the space key on a button or link will cause the page to scroll unless preventDefault()
       // is called. While calling preventDefault() appears to have no effect on link navigation, it skips
@@ -244,7 +266,6 @@ export class ActionMenuElement extends HTMLElement {
       this.#hide()
     } else {
       this.#show()
-      this.#firstItem?.focus()
     }
   }
 
@@ -263,7 +284,7 @@ export class ActionMenuElement extends HTMLElement {
     dialog.addEventListener('cancel', handleDialogClose, {signal})
   }
 
-  #handleItemActivated(event: Event, item: Element) {
+  #handleItemActivated(item: Element) {
     // Hide popover after current event loop to prevent changes in focus from
     // altering the target of the event. Not doing this specifically affects
     // <a> tags. It causes the event to be sent to the currently focused element
@@ -304,6 +325,11 @@ export class ActionMenuElement extends HTMLElement {
     }
 
     this.#updateInput()
+    this.dispatchEvent(
+      new CustomEvent('itemActivated', {
+        detail: {item: item.parentElement, checked: this.isItemChecked(item.parentElement)},
+      }),
+    )
   }
 
   #activateItem(event: Event, item: Element) {
@@ -410,9 +436,85 @@ export class ActionMenuElement extends HTMLElement {
     return this.querySelector(menuItemSelectors.join(','))
   }
 
-  get #items(): HTMLElement[] {
+  get items(): HTMLElement[] {
     return Array.from(this.querySelectorAll(menuItemSelectors.join(',')))
   }
+
+  getItemById(itemId: string): HTMLElement | null {
+    return this.querySelector(`li[data-item-id="${itemId}"`)
+  }
+
+  isItemDisabled(item: Element | null): boolean {
+    if (item) {
+      return item.classList.contains('ActionListItem--disabled')
+    } else {
+      return false
+    }
+  }
+
+  disableItem(item: Element | null) {
+    if (item) {
+      item.classList.add('ActionListItem--disabled')
+      item.querySelector('.ActionListContent')!.setAttribute('aria-disabled', 'true')
+    }
+  }
+
+  enableItem(item: Element | null) {
+    if (item) {
+      item.classList.remove('ActionListItem--disabled')
+      item.querySelector('.ActionListContent')!.removeAttribute('aria-disabled')
+    }
+  }
+
+  isItemHidden(item: Element | null): boolean {
+    if (item) {
+      return item.hasAttribute('hidden')
+    } else {
+      return false
+    }
+  }
+
+  hideItem(item: Element | null) {
+    if (item) {
+      item.setAttribute('hidden', 'hidden')
+    }
+  }
+
+  showItem(item: Element | null) {
+    if (item) {
+      item.removeAttribute('hidden')
+    }
+  }
+
+  isItemChecked(item: Element | null) {
+    if (item) {
+      return item.querySelector('.ActionListContent')!.getAttribute('aria-checked') === 'true'
+    } else {
+      return false
+    }
+  }
+
+  checkItem(item: Element | null) {
+    if (item && (this.selectVariant === 'single' || this.selectVariant === 'multiple')) {
+      const itemContent = item.querySelector('.ActionListContent')!
+      const ariaChecked = itemContent.getAttribute('aria-checked') === 'true'
+
+      if (!ariaChecked) {
+        this.#handleItemActivated(itemContent)
+      }
+    }
+  }
+
+  uncheckItem(item: Element | null) {
+    if (item && (this.selectVariant === 'single' || this.selectVariant === 'multiple')) {
+      const itemContent = item.querySelector('.ActionListContent')!
+      const ariaChecked = itemContent.getAttribute('aria-checked') === 'true'
+
+      if (ariaChecked) {
+        this.#handleItemActivated(itemContent)
+      }
+    }
+  }
 }
 
 if (!window.customElements.get('action-menu')) {

data/app/components/primer/alpha/action_menu/group.rb

@@ -0,0 +1,23 @@
+# typed: true
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class ActionMenu
+      # This component is part of <%= link_to_component(Primer::Alpha::ActionMenu) %> and should not be
+      # used as a standalone component.
+      class Group < Primer::Alpha::ActionList
+        # Heading text rendered above the list of items.
+        #
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu::Heading) %>.
+        def with_heading(**system_arguments, &block)
+          super(component_klass: Primer::Alpha::ActionMenu::Heading, **system_arguments, &block)
+        end
+
+        def with_divider
+          raise "ActionMenu groups cannot have dividers"
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/action_menu/heading.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class ActionMenu
+      # Heading used to describe groups within an action menu.
+      class Heading < Primer::Alpha::ActionList::Heading
+        def initialize(**)
+          super
+
+          # Headings don't make sense in a menu context, so use div instead
+          @tag = :div
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/action_menu/list.html.erb

@@ -0,0 +1 @@
+<%= render(@list) %>

data/app/components/primer/alpha/action_menu/list.rb

@@ -1,4 +1,3 @@
-# typed: true
 # frozen_string_literal: true
 
 module Primer
@@ -6,72 +5,84 @@ module Primer
     class ActionMenu
       # This component is part of <%= link_to_component(Primer::Alpha::ActionMenu) %> and should not be
       # used as a standalone component.
-      class List < Primer::Alpha::ActionList
+      class List < Primer::Component
         DEFAULT_ITEM_TAG = :button
         ITEM_TAG_OPTIONS = [:a, :"clipboard-copy", DEFAULT_ITEM_TAG].freeze
 
-        # Adds a new item to the list.
-        #
-        # @param data [Hash] When the menu is used as a form input (see the <%= link_to_component(Primer::Alpha::ActionMenu) %> docs), the label is submitted to the server by default. However, if the `data: { value: }` or `"data-value":` attribute is provided, it will be sent to the server instead.
-        # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::ActionList::Item) %>, or whatever class is passed as the `component_klass` argument.
-        def with_item(data: {}, **system_arguments, &block)
-          system_arguments = organize_arguments(data: data, **system_arguments)
+        attr_reader :items
 
-          super(**system_arguments) do |item|
-            evaluate_block(item, &block)
-          end
-        end
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>
+        def initialize(**system_arguments)
+          @items = []
+          @has_group = false
 
-        # Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.
-        #
-        # @param src [String] The source url of the avatar image.
-        # @param username [String] The username associated with the avatar.
-        # @param full_name [String] Optional. The user's full name.
-        # @param full_name_scheme [Symbol] Optional. How to display the user's full name. <%= one_of(Primer::Alpha::ActionList::Item::DESCRIPTION_SCHEME_OPTIONS) %>
-        # @param data [Hash] When the menu is used as a form input (see the <%= link_to_component(Primer::Alpha::ActionMenu) %> docs), the label is submitted to the server by default. However, if the `data: { value: }` or `"data-value":` attribute is provided, it will be sent to the server instead.
-        # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>.
-        # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::ActionList::Item) %>, or whatever class is passed as the `component_klass` argument.
-        def with_avatar_item(src:, username:, full_name: nil, full_name_scheme: Primer::Alpha::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME, data: {}, avatar_arguments: {}, **system_arguments, &block)
-          system_arguments = organize_arguments(data: data, **system_arguments)
-
-          super(src: src, username: username, full_name: full_name, full_name_scheme: full_name_scheme, avatar_arguments: avatar_arguments, **system_arguments) do |item|
-            evaluate_block(item, &block)
-          end
+          @list = Primer::Alpha::ActionMenu::ListWrapper.new(**system_arguments)
         end
 
-        # @param menu_id [String] ID of the parent menu.
-        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>
-        def initialize(menu_id:, **system_arguments, &block)
-          @menu_id = menu_id
+        def with_group(**system_arguments, &block)
+          @has_group = true
 
-          system_arguments[:aria] = merge_aria(
-            system_arguments,
-            { aria: { labelledby: "#{@menu_id}-button" } }
-          )
+          @items << {
+            type: :group,
+            kwargs: system_arguments,
+            block: block
+          }
+        end
 
-          system_arguments[:role] = :menu
-          system_arguments[:scheme] = :inset
-          system_arguments[:id] = "#{@menu_id}-list"
+        def with_item(**system_arguments, &block)
+          @items << {
+            type: :item,
+            kwargs: organize_arguments(**system_arguments),
+            block: block
+          }
+        end
+
+        def with_avatar_item(**system_arguments, &block)
+          @items << {
+            type: :avatar_item,
+            kwargs: organize_arguments(**system_arguments),
+            block: block
+          }
+        end
 
-          super(**system_arguments, &block)
+        def with_divider(**system_arguments, &block)
+          @items << {
+            type: :divider,
+            kwargs: system_arguments,
+            block: block
+          }
         end
 
         private
 
-        def evaluate_block(*args, &block)
-          # Prevent double renders by using the capture method on the component
-          # that originally received the block.
-          #
-          # Handle blocks that originate from C code such as `&:method` by checking
-          # source_location. Such blocks don't allow access to their receiver.
-          return unless block&.source_location
+        def contains_group?
+          @has_group
+        end
 
-          block_context = block.binding.receiver
+        def before_render
+          content
+
+          @items.each do |item|
+            case item[:type]
+            when :divider, :group
+              add_item(item, to: @list)
+            else
+              if contains_group?
+                @list.with_group do |group|
+                  add_item(item, to: group)
+                end
+              else
+                add_item(item, to: @list)
+              end
+            end
+          end
+        end
 
-          if block_context.class < ActionView::Base
-            block_context.capture(*args, &block)
-          else
-            capture(*args, &block)
+        def add_item(item, to:)
+          parent = to
+          mtd = :"with_#{item[:type]}"
+          parent.send(mtd, **item[:kwargs]) do |item_instance|
+            evaluate_block(item_instance, &item[:block])
           end
         end
 

data/app/components/primer/alpha/action_menu/list_wrapper.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class ActionMenu
+      # This component is part of <%= link_to_component(Primer::Alpha::ActionMenu) %> and should not be
+      # used as a standalone component.
+      class ListWrapper < Primer::Alpha::ActionList
+        add_polymorphic_slot_type(
+          slot_name: :items,
+          type: :group,
+          callable: lambda { |**system_arguments|
+            Primer::Alpha::ActionMenu::Group.new(
+              **system_arguments,
+              role: :group,
+              select_variant: @select_variant
+            )
+          }
+        )
+
+        # @param menu_id [String] ID of the parent menu.
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>
+        def initialize(menu_id:, **system_arguments)
+          @menu_id = menu_id
+
+          system_arguments[:aria] = merge_aria(
+            system_arguments,
+            { aria: { labelledby: "#{@menu_id}-button" } }
+          )
+
+          system_arguments[:role] = :menu
+          system_arguments[:scheme] = :inset
+          system_arguments[:id] = "#{@menu_id}-list"
+
+          super(**system_arguments)
+        end
+      end
+    end
+  end
+end

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

@@ -128,6 +128,39 @@ module Primer
     #
     #   Additional information around the keyboard functionality and implementation can be found on the
     #   [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#menu).
+    #
+    # ### JavaScript API
+    #
+    # `ActionList`s render an `<action-list>` custom element that exposes behavior to the client. For all these methods,
+    # `itemId` refers to the value of the `item_id:` argument (see below) that is used to populate the `data-item-id` HTML
+    # attribute.
+    #
+    # #### Query methods
+    #
+    # * `getItemById(itemId: string): Element`: Returns the item's HTML `<li>` element. The return value can be passed as the `item` argument to the other methods listed below.
+    # * `isItemChecked(item: Element): boolean`: Returns `true` if the item is checked, `false` otherwise.
+    # * `isItemHidden(item: Element): boolean`: Returns `true` if the item is hidden, `false` otherwise.
+    # * `isItemDisabled(item: Element): boolean`: Returns `true` if the item is disabled, `false` otherwise.
+    #
+    # #### State methods
+    #
+    # * `showItem(item: Element)`: Shows the item, i.e. makes it visible.
+    # * `hideItem(item: Element)`: Hides the item, i.e. makes it invisible.
+    # * `enableItem(item: Element)`: Enables the item, i.e. makes it clickable by the mouse and keyboard.
+    # * `disableItem(item: Element)`: Disables the item, i.e. makes it unclickable by the mouse and keyboard.
+    # * `checkItem(item: Element)`: Checks the item. Only has an effect in single- and multi-select modes.
+    # * `uncheckItem(item: Element)`: Unchecks the item. Only has an effect in multi-select mode, since items cannot be unchecked in single-select mode.
+    #
+    # #### Events
+    #
+    # The `<action-menu>` element fires an `itemActivated` event whenever an item is activated (eg. clicked) via the mouse or keyboard.
+    #
+    # ```typescript
+    # document.querySelector("action-menu").addEventListener("itemActivated", (event: ItemActivatedEvent) => {
+    #   event.item  // Element: the <li> item that was activated
+    #   event.checked  // boolean: whether or not the result of the activation checked the item
+    # })
+    # ```
     class ActionMenu < Primer::Component
       status :alpha
 
@@ -175,7 +208,7 @@ module Primer
 
         @system_arguments[:preload] = true if @src.present? && preload?
 
-        select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT)
+        @select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT)
 
         @system_arguments[:tag] = :"action-menu"
         @system_arguments[:"data-select-variant"] = select_variant
@@ -243,6 +276,10 @@ module Primer
         @list.with_avatar_item(**system_arguments, &block)
       end
 
+      def with_group(**system_arguments, &block)
+        @list.with_group(**system_arguments, &block)
+      end
+
       private
 
       def before_render

data/app/components/primer/alpha/banner.html.erb

@@ -22,7 +22,7 @@
           Primer::Beta::IconButton.new(
             scheme: :invisible,
             icon: :x,
-            aria: { label: "Dismiss" },
+            aria: { label: @dismiss_label },
             data: { action: catalyst_action(event: "click", function: "dismiss") },
             autofocus: true
           )

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

@@ -55,17 +55,21 @@ module Primer
         :hide
       ].freeze
 
+      DEFAULT_DISMISS_LABEL = "Dismiss"
+
       # @param full [Boolean] Whether the component should take up the full width of the screen.
       # @param full_when_narrow [Boolean] Whether the component should take up the full width of the screen when rendered inside smaller viewports.
       # @param dismiss_scheme [Symbol] Whether the component can be dismissed with an "x" button. <%= one_of(Primer::Alpha::Banner::DISMISS_SCHEMES) %>
+      # @param dismiss_label [String] The aria-label text of the dismiss "x" button
       # @param description [String] Description text rendered underneath the message.
       # @param icon [Symbol] The name of an <%= link_to_octicons %> icon to use. If no icon is provided, a default one will be chosen based on the scheme.
       # @param scheme [Symbol] <%= one_of(Primer::Alpha::Banner::SCHEME_MAPPINGS.keys) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(full: false, full_when_narrow: false, dismiss_scheme: DEFAULT_DISMISS_SCHEME, description: nil, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
+      def initialize(full: false, full_when_narrow: false, dismiss_scheme: DEFAULT_DISMISS_SCHEME, dismiss_label: DEFAULT_DISMISS_LABEL, description: nil, icon: nil, scheme: DEFAULT_SCHEME, **system_arguments)
         @scheme = fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)
         @icon = icon || DEFAULT_ICONS[@scheme]
         @dismiss_scheme = dismiss_scheme
+        @dismiss_label = dismiss_label
         @description = description
 
         @system_arguments = deny_tag_argument(**system_arguments)

data/app/components/primer/alpha/dialog.html.erb

@@ -5,7 +5,9 @@
     <% if content.present? %>
       <%= content %>
     <% else %>
-      <%= body %>
+      <scrollable-region data-labelled-by="<%= labelledby %>">
+        <%= body %>
+      </scrollable-region>
       <%= footer %>
     <% end %>
   <% end %>

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

@@ -133,7 +133,7 @@ module Primer
           @system_arguments, {
             aria: {
               disabled: true,
-              labelledby: "#{@id}-title",
+              labelledby: labelledby,
               describedby: "#{@id}-description"
             }
           }
@@ -155,6 +155,10 @@ module Primer
         with_header unless header?
         with_body unless body?
       end
+
+      def labelledby
+        "#{@id}-title"
+      end
     end
   end
 end

data/app/components/primer/alpha/layout.css

@@ -1 +1 @@
-.Layout{--Layout-sidebar-width:220px;--Layout-gutter:16px;grid-gap:var(--Layout-gutter);display:grid;grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)))}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout .Layout-divider,.Layout .Layout-main,.Layout .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-inset,var(--color-canvas-inset));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md .Layout-divider,.Layout.Layout--flowRow-until-md .Layout-main,.Layout.Layout--flowRow-until-md .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-inset,var(--color-canvas-inset));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg .Layout-divider,.Layout.Layout--flowRow-until-lg .Layout-main,.Layout.Layout--flowRow-until-lg .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-inset,var(--color-canvas-inset));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{background:var(--borderColor-default,var(--color-border-default));display:block;grid-column:2;margin-right:-1px;width:1px}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-xl{margin-left:auto;margin-right:auto}.Layout-main .Layout-main-centered-lg>.container-lg,.Layout-main .Layout-main-centered-lg>.container-md,.Layout-main .Layout-main-centered-lg>.container-xl,.Layout-main .Layout-main-centered-md>.container-lg,.Layout-main .Layout-main-centered-md>.container-md,.Layout-main .Layout-main-centered-md>.container-xl,.Layout-main .Layout-main-centered-xl>.container-lg,.Layout-main .Layout-main-centered-xl>.container-md,.Layout-main .Layout-main-centered-xl>.container-xl{margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--breakpoint-medium,48rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--breakpoint-large,63.25rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--breakpoint-xlarge,80rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}
+.Layout{display:grid;--Layout-sidebar-width:220px;--Layout-gutter:16px;grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));grid-gap:var(--Layout-gutter)}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout .Layout-divider,.Layout .Layout-main,.Layout .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-inset,var(--color-canvas-inset));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md .Layout-divider,.Layout.Layout--flowRow-until-md .Layout-main,.Layout.Layout--flowRow-until-md .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-inset,var(--color-canvas-inset));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg .Layout-divider,.Layout.Layout--flowRow-until-lg .Layout-main,.Layout.Layout--flowRow-until-lg .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-inset,var(--color-canvas-inset));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{background:var(--borderColor-default,var(--color-border-default));display:block;grid-column:2;margin-right:-1px;width:1px}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-xl{margin-left:auto;margin-right:auto}.Layout-main .Layout-main-centered-lg>.container-lg,.Layout-main .Layout-main-centered-lg>.container-md,.Layout-main .Layout-main-centered-lg>.container-xl,.Layout-main .Layout-main-centered-md>.container-lg,.Layout-main .Layout-main-centered-md>.container-md,.Layout-main .Layout-main-centered-md>.container-xl,.Layout-main .Layout-main-centered-xl>.container-lg,.Layout-main .Layout-main-centered-xl>.container-md,.Layout-main .Layout-main-centered-xl>.container-xl{margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--breakpoint-medium,48rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--breakpoint-large,63.25rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--breakpoint-xlarge,80rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}

data/app/components/primer/alpha/layout.css.map

@@ -1 +1 @@
-{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QAGE,4BAA6B,CAC7B,oBAAqB,CAsBrB,6BAA8B,CAzB9B,YAAa,CAuBb,qBAAsB,CACtB,sGA0HF,CA7IE,wCANF,QA7EE,kBAAmB,CACnB,mCA+NF,CA7NE,qEAIE,uBAAyB,CADzB,oBAEF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCAEE,UAAW,CADX,UAeF,CAZE,uEACE,YACF,CAEA,wEAGE,yDAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,iHACE,iBACF,CAEA,yEACE,UACF,CAmCJ,CAGE,wCADF,iCAvFA,kBAAmB,CACnB,mCA0FA,CAxFA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,yDAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CAwCF,CAIA,yCADF,iCA7FA,kBAAmB,CACnB,mCAgGA,CA9FA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,yDAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CASF,wBACE,aACF,CAEA,wBACE,YACF,CAEA,qBACE,oBACF,CAIA,0BA1CF,QA2CI,oBAwGJ,CAvGE,CAEA,4BAEE,mBACF,CAEA,iCACE,oBACF,CAGE,0BADF,gCAEI,oBAMJ,CALE,CAEA,0BALF,gCAMI,oBAEJ,CADE,CAIF,yBAlEF,QAmEI,4BAgFJ,CA/EE,CAEA,yBAtEF,QAuEI,4BA4EJ,CA3EE,CAEA,0BA1EF,QA2EI,4BAwEJ,CAvEE,CAGE,yBADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CAEA,6BAEI,4BAMJ,CAXE,CAQA,0BALF,6BAMI,4BAEJ,CADE,CAMA,sDACE,aACF,CAEA,mDACE,oBACF,CAGF,oCACE,sGASF,CAPE,iDACE,aACF,CAEA,oDACE,oBACF,CAMA,wCAKE,iEAAsC,CAJtC,aAAc,CACd,aAAc,CAEd,iBAAkB,CADlB,SAGF,CAOE,yGACE,oBACF,CAEA,iEACE,aACF,CAKN,gBACE,YAAa,CACb,SACF,CAEA,gBACE,iCACF,CAEA,aACE,WA4BF,CAxBE,kHAIE,gBAAiB,CADjB,iBAQF,CALE,odAGE,aACF,CAGF,sCACE,mGACF,CAEA,sCACE,qGACF,CAEA,sCACE,mGACF","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n  grid-auto-flow: row;\n  grid-template-columns: 1fr !important;\n\n  & .Layout-sidebar,\n  & .Layout-divider,\n  & .Layout-main {\n    width: 100% !important;\n    grid-column: 1 !important;\n  }\n\n  &.Layout--sidebarPosition-flowRow-start {\n    & .Layout-sidebar {\n      grid-row: 1;\n    }\n\n    & .Layout-main {\n      grid-row: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-end {\n    & .Layout-sidebar {\n      grid-row: 2 / span 2;\n    }\n\n    & .Layout-main {\n      grid-row: 1;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-none {\n    & .Layout-sidebar {\n      display: none;\n    }\n  }\n\n  &.Layout--divided {\n    @mixin flow-as-row-divider;\n\n    & .Layout-main {\n      grid-row: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-flowRow-end {\n      & .Layout-sidebar {\n        grid-row: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-row: 1;\n      }\n    }\n  }\n}\n\n@define-mixin flow-as-row-divider {\n  --Layout-gutter: 0;\n\n  & .Layout-divider {\n    height: 1px;\n    grid-row: 2;\n\n    &.Layout-divider--flowRow-hidden {\n      display: none;\n    }\n\n    &.Layout-divider--flowRow-shallow {\n      height: 8px;\n      margin-right: 0;\n      background: var(--bgColor-inset);\n      border-color: var(--borderColor-default);\n      border-style: solid;\n      border-width: var(--borderWidth-thin) 0;\n    }\n  }\n}\n\n.Layout {\n  display: grid;\n\n  --Layout-sidebar-width: 220px;\n  --Layout-gutter: 16px;\n\n  @media (max-width: calc(544px - 0.02px)) {\n    @mixin flow-as-row;\n  }\n\n  &.Layout--flowRow-until-md {\n    @media (max-width: calc(768px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  &.Layout--flowRow-until-lg {\n    @media (max-width: calc(1012px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  /* Flow as column */\n\n  grid-auto-flow: column;\n  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n  grid-gap: var(--Layout-gutter);\n\n  & .Layout-sidebar {\n    grid-column: 1;\n  }\n\n  & .Layout-divider {\n    display: none;\n  }\n\n  & .Layout-main {\n    grid-column: 2 / span 2;\n  }\n\n  /* Gutter spacing */\n\n  @media (min-width: 1012px) {\n    --Layout-gutter: 24px;\n  }\n\n  &.Layout--gutter-none {\n    /* stylelint-disable-next-line length-zero-no-unit */\n    --Layout-gutter: 0px; /* Neds px in value */\n  }\n\n  &.Layout--gutter-condensed {\n    --Layout-gutter: 16px;\n  }\n\n  &.Layout--gutter-spacious {\n    @media (min-width: 1012px) {\n      --Layout-gutter: 32px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-gutter: 40px;\n    }\n  }\n\n  /* Sidebar width */\n  @media (min-width: 544px) {\n    --Layout-sidebar-width: 220px;\n  }\n\n  @media (min-width: 768px) {\n    --Layout-sidebar-width: 256px;\n  }\n\n  @media (min-width: 1012px) {\n    --Layout-sidebar-width: 296px;\n  }\n\n  &.Layout--sidebar-narrow {\n    @media (min-width: 768px) {\n      --Layout-sidebar-width: 240px;\n    }\n\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 256px;\n    }\n  }\n\n  &.Layout--sidebar-wide {\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 320px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-sidebar-width: 336px;\n    }\n  }\n\n  /* Sidebar position */\n\n  &.Layout--sidebarPosition-start {\n    & .Layout-sidebar {\n      grid-column: 1;\n    }\n\n    & .Layout-main {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-end {\n    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n    & .Layout-main {\n      grid-column: 1;\n    }\n\n    & .Layout-sidebar {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  /* Sidebar divider */\n\n  &.Layout--divided {\n    & .Layout-divider {\n      display: block;\n      grid-column: 2;\n      width: 1px;\n      margin-right: -1px;\n      background: var(--borderColor-default);\n    }\n\n    & .Layout-main {\n      grid-column: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-end {\n      & .Layout-sidebar {\n        grid-column: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-column: 1;\n      }\n    }\n  }\n}\n\n.Layout-divider {\n  display: none;\n  width: 1px;\n}\n\n.Layout-sidebar {\n  width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n  min-width: 0;\n\n  /* Centered main column\n  ** FIXME: right-aligned sidebar */\n  & .Layout-main-centered-md,\n  & .Layout-main-centered-lg,\n  & .Layout-main-centered-xl {\n    margin-right: auto;\n    margin-left: auto;\n\n    & > .container-md,\n    & > .container-lg,\n    & > .container-xl {\n      margin-left: 0;\n    }\n  }\n\n  & .Layout-main-centered-md {\n    max-width: calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-lg {\n    max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-xl {\n    max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n}\n"]}
+{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QACE,YAAa,CAEb,4BAA6B,CAC7B,oBAAqB,CAoBrB,qBAAsB,CACtB,sGAAwG,CACxG,6BAyHF,CA7IE,wCANF,QA7EE,kBAAmB,CACnB,mCA+NF,CA7NE,qEAIE,uBAAyB,CADzB,oBAEF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCAEE,UAAW,CADX,UAeF,CAZE,uEACE,YACF,CAEA,wEAGE,yDAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,iHACE,iBACF,CAEA,yEACE,UACF,CAmCJ,CAGE,wCADF,iCAvFA,kBAAmB,CACnB,mCA0FA,CAxFA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,yDAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CAwCF,CAIA,yCADF,iCA7FA,kBAAmB,CACnB,mCAgGA,CA9FA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,yDAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CASF,wBACE,aACF,CAEA,wBACE,YACF,CAEA,qBACE,oBACF,CAIA,0BA1CF,QA2CI,oBAwGJ,CAvGE,CAEA,4BAEE,mBACF,CAEA,iCACE,oBACF,CAGE,0BADF,gCAEI,oBAMJ,CALE,CAEA,0BALF,gCAMI,oBAEJ,CADE,CAIF,yBAlEF,QAmEI,4BAgFJ,CA/EE,CAEA,yBAtEF,QAuEI,4BA4EJ,CA3EE,CAEA,0BA1EF,QA2EI,4BAwEJ,CAvEE,CAGE,yBADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CAEA,6BAEI,4BAMJ,CAXE,CAQA,0BALF,6BAMI,4BAEJ,CADE,CAMA,sDACE,aACF,CAEA,mDACE,oBACF,CAGF,oCACE,sGASF,CAPE,iDACE,aACF,CAEA,oDACE,oBACF,CAMA,wCAKE,iEAAsC,CAJtC,aAAc,CACd,aAAc,CAEd,iBAAkB,CADlB,SAGF,CAOE,yGACE,oBACF,CAEA,iEACE,aACF,CAKN,gBACE,YAAa,CACb,SACF,CAEA,gBACE,iCACF,CAEA,aACE,WA4BF,CAxBE,kHAIE,gBAAiB,CADjB,iBAQF,CALE,odAGE,aACF,CAGF,sCACE,mGACF,CAEA,sCACE,qGACF,CAEA,sCACE,mGACF","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n  grid-auto-flow: row;\n  grid-template-columns: 1fr !important;\n\n  & .Layout-sidebar,\n  & .Layout-divider,\n  & .Layout-main {\n    width: 100% !important;\n    grid-column: 1 !important;\n  }\n\n  &.Layout--sidebarPosition-flowRow-start {\n    & .Layout-sidebar {\n      grid-row: 1;\n    }\n\n    & .Layout-main {\n      grid-row: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-end {\n    & .Layout-sidebar {\n      grid-row: 2 / span 2;\n    }\n\n    & .Layout-main {\n      grid-row: 1;\n    }\n  }\n\n  &.Layout--sidebarPosition-flowRow-none {\n    & .Layout-sidebar {\n      display: none;\n    }\n  }\n\n  &.Layout--divided {\n    @mixin flow-as-row-divider;\n\n    & .Layout-main {\n      grid-row: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-flowRow-end {\n      & .Layout-sidebar {\n        grid-row: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-row: 1;\n      }\n    }\n  }\n}\n\n@define-mixin flow-as-row-divider {\n  --Layout-gutter: 0;\n\n  & .Layout-divider {\n    height: 1px;\n    grid-row: 2;\n\n    &.Layout-divider--flowRow-hidden {\n      display: none;\n    }\n\n    &.Layout-divider--flowRow-shallow {\n      height: 8px;\n      margin-right: 0;\n      background: var(--bgColor-inset);\n      border-color: var(--borderColor-default);\n      border-style: solid;\n      border-width: var(--borderWidth-thin) 0;\n    }\n  }\n}\n\n.Layout {\n  display: grid;\n\n  --Layout-sidebar-width: 220px;\n  --Layout-gutter: 16px;\n\n  @media (max-width: calc(544px - 0.02px)) {\n    @mixin flow-as-row;\n  }\n\n  &.Layout--flowRow-until-md {\n    @media (max-width: calc(768px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  &.Layout--flowRow-until-lg {\n    @media (max-width: calc(1012px - 0.02px)) {\n      @mixin flow-as-row;\n    }\n  }\n\n  /* Flow as column */\n\n  grid-auto-flow: column;\n  grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n  grid-gap: var(--Layout-gutter);\n\n  & .Layout-sidebar {\n    grid-column: 1;\n  }\n\n  & .Layout-divider {\n    display: none;\n  }\n\n  & .Layout-main {\n    grid-column: 2 / span 2;\n  }\n\n  /* Gutter spacing */\n\n  @media (min-width: 1012px) {\n    --Layout-gutter: 24px;\n  }\n\n  &.Layout--gutter-none {\n    /* stylelint-disable-next-line length-zero-no-unit */\n    --Layout-gutter: 0px; /* Neds px in value */\n  }\n\n  &.Layout--gutter-condensed {\n    --Layout-gutter: 16px;\n  }\n\n  &.Layout--gutter-spacious {\n    @media (min-width: 1012px) {\n      --Layout-gutter: 32px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-gutter: 40px;\n    }\n  }\n\n  /* Sidebar width */\n  @media (min-width: 544px) {\n    --Layout-sidebar-width: 220px;\n  }\n\n  @media (min-width: 768px) {\n    --Layout-sidebar-width: 256px;\n  }\n\n  @media (min-width: 1012px) {\n    --Layout-sidebar-width: 296px;\n  }\n\n  &.Layout--sidebar-narrow {\n    @media (min-width: 768px) {\n      --Layout-sidebar-width: 240px;\n    }\n\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 256px;\n    }\n  }\n\n  &.Layout--sidebar-wide {\n    @media (min-width: 1012px) {\n      --Layout-sidebar-width: 320px;\n    }\n\n    @media (min-width: 1280px) {\n      --Layout-sidebar-width: 336px;\n    }\n  }\n\n  /* Sidebar position */\n\n  &.Layout--sidebarPosition-start {\n    & .Layout-sidebar {\n      grid-column: 1;\n    }\n\n    & .Layout-main {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  &.Layout--sidebarPosition-end {\n    grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n    & .Layout-main {\n      grid-column: 1;\n    }\n\n    & .Layout-sidebar {\n      grid-column: 2 / span 2;\n    }\n  }\n\n  /* Sidebar divider */\n\n  &.Layout--divided {\n    & .Layout-divider {\n      display: block;\n      grid-column: 2;\n      width: 1px;\n      margin-right: -1px;\n      background: var(--borderColor-default);\n    }\n\n    & .Layout-main {\n      grid-column: 3 / span 1;\n    }\n\n    &.Layout--sidebarPosition-end {\n      & .Layout-sidebar {\n        grid-column: 3 / span 1;\n      }\n\n      & .Layout-main {\n        grid-column: 1;\n      }\n    }\n  }\n}\n\n.Layout-divider {\n  display: none;\n  width: 1px;\n}\n\n.Layout-sidebar {\n  width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n  min-width: 0;\n\n  /* Centered main column\n  ** FIXME: right-aligned sidebar */\n  & .Layout-main-centered-md,\n  & .Layout-main-centered-lg,\n  & .Layout-main-centered-xl {\n    margin-right: auto;\n    margin-left: auto;\n\n    & > .container-md,\n    & > .container-lg,\n    & > .container-xl {\n      margin-left: 0;\n    }\n  }\n\n  & .Layout-main-centered-md {\n    max-width: calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-lg {\n    max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n\n  & .Layout-main-centered-xl {\n    max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n  }\n}\n"]}

data/app/components/primer/alpha/modal_dialog.ts

@@ -80,7 +80,7 @@ function mousedownHandler(event: Event) {
           topLevelDialog.close()
         }
       },
-      {once: true}
+      {once: true},
     )
   }
 }