<commit_before>extends layout.tpl.jade

block append vars
  - titles.push('UI Components')

block append main
  p These are components of a user-interactive nature.
  section#c-Alert
    h2 The #[code .c-Alert] Component
    p.
      The Alert Component builds off the Box Object, so you must include #[code o-Box] in the class attribute.
      Subclasses of the Alert Component determine specific types of Alerts.
      The Alert may contain an optional #[code .c-Alert__Title] Subcomponent at the beginning.
    figure
      p.c-Alert                     #[strong.c-Alert__Title Alert   :       ] This is a generic Alert (no Box Object).                    (.c-Alert                    ) Use .c-Alert__Link to include a #[a.c-Alert__Link(href="") proper link].
      p.o-Box.c-Alert               #[strong.c-Alert__Title Alert   :       ] This is an Alert using a generic Box Object.                (.o-Box.c-Alert              ) Use .c-Alert__Link to include a #[a.c-Alert__Link(href="") proper link].
      p.o-Box.c-Alert.c-Alert--dang #[strong.c-Alert__Title Danger  &#x0021;] An error has occurred or will occur. This cannot be undone. (.o-Box.c-Alert.c-Alert--dang) Use .c-Alert__Link to include a #[a.c-Alert__Link(href="") proper link].
      p.o-Box.c-Alert.c-Alert--cshn #[strong.c-Alert__Title Caution &#x2026;] Proceed with care. Are you sure you want to continue?       (.o-Box.c-Alert.c-Alert--cshn) Use .c-Alert__Link to include a #[a.c-Alert__Link(href="") proper link].
      p.o-Box.c-Alert.c-Alert--skss #[strong.c-Alert__Title Success &#x263a;] You have successfully completed the task as intended.       (.o-Box.c-Alert.c-Alert--skss) Use .c-Alert__Link to include a #[a.c-Alert__Link(href="") proper link].
      p.o-Box.c-Alert.c-Alert--info #[strong.c-Alert__Title Info    &#x003f;] This is some more information about a thing.                (.o-Box.c-Alert.c-Alert--info) Use .c-Alert__Link to include a #[a.c-Alert__Link(href="") proper link].
      p.o-Box.c-Alert.c-Alert--help #[strong.c-Alert__Title Help    &#x2665;] Here are some hints and tips for you. You&rsquo;re welcome. (.o-Box.c-Alert.c-Alert--help) Use .c-Alert__Link to include a #[a.c-Alert__Link(href="") proper link].
  section#c-Label
    h2 The #[code .c-Label] Component
    p.
      The Label Component builds off the Textbox Object, so include the #[code .o-Textbox] class.
      Subclasses add skins.
    figure
      h3 Example h3 #[small.o-Textbox.c-Label .o-Textbox.c-Label]
      p Example paragraph. #[small.c-Label                                   .c-Label              ]
      p Example paragraph. #[small.o-Textbox.c-Label               .o-Textbox.c-Label              ]
      p Example paragraph. #[small.o-Textbox.c-Label.c-Label--dang .o-Textbox.c-Label.c-Label--dang]
      p Example paragraph. #[small.o-Textbox.c-Label.c-Label--cshn .o-Textbox.c-Label.c-Label--cshn]
      p Example paragraph. #[small.o-Textbox.c-Label.c-Label--skss .o-Textbox.c-Label.c-Label--skss]
      p Example paragraph. #[small.o-Textbox.c-Label.c-Label--info .o-Textbox.c-Label.c-Label--info]
      p Example paragraph. #[small.o-Textbox.c-Label.c-Label--help .o-Textbox.c-Label.c-Label--help]
  section#c-Badge
    h2 The #[code .c-Badge] Component
    p.
      The Badge Component builds off the Textbox Object, so include the #[code .o-Textbox] class.
      Subclasses add skins.
    figure
      h3 Example h3 #[small.o-Textbox.c-Badge .o-Textbox.c-Badge]
      p Example p with a           .c-Badge              . #[small.c-Badge                         0]
      p Example p with a .o-Textbox.c-Badge              . #[small.o-Textbox.c-Badge               0]
      p Example p with a .o-Textbox.c-Badge.c-Badge--dang. #[small.o-Textbox.c-Badge.c-Badge--dang 2]
      p Example p with a .o-Textbox.c-Badge.c-Badge--cshn. #[small.o-Textbox.c-Badge.c-Badge--cshn 4]
      p Example p with a .o-Textbox.c-Badge.c-Badge--skss. #[small.o-Textbox.c-Badge.c-Badge--skss 16]
      p Example p with a .o-Textbox.c-Badge.c-Badge--info. #[small.o-Textbox.c-Badge.c-Badge--info 256]
      p Example p with a .o-Textbox.c-Badge.c-Badge--help. #[small.o-Textbox.c-Badge.c-Badge--help 65,536]
  section#text-level
    h2 Text-Level Components
    section#c-Key
      h3 The #[code .c-Key] Component
      p.
        Use #[code .o-Textbox.c-Key] to represent
        a #[span.o-Textbox.c-Key button] or #[span.o-Textbox.c-Key key]
        on a physical device. May be instantiated by the #[code kbd &gt; kbd] Element.
        Contrary to #[a Button Components],
        these Key Components are not meant to be interactive.
<commit_msg>fix TOC & headings<commit_after>extends layout.tpl.jade

block append vars
  - titles.push('UI Components')

block append main__header
  p These are components of a user-interactive nature.
  nav#table-contents
    h2 Table of Contents
    ol
      li: a(href="#table-contents") Table of Contents
      li: a(href="#alert-component") The Alert Component
      li: a(href="#label-component") The Label Component
      li: a(href="#badge-component") The Badge Component
      li
        a(href="#text-level-components") Text-Level Components
        ol
          li: a(href="#key-component") The Key Component

block append main
  section#alert-component
    h2 The Alert Component
    p.
      The Alert Component builds off the Box Object, so you must include #[code o-Box] in the class attribute.
      Subclasses of the Alert Component determine specific types of Alerts.
      The Alert may contain an optional #[code .c-Alert__Title] Subcomponent at the beginning.
    figure
      p.c-Alert                     #[strong.c-Alert__Title Alert   :       ] This is a generic Alert (no Box Object).                    (.c-Alert                    ) Use .c-Alert__Link to include a #[a.c-Alert__Link(href="") proper link].
      p.o-Box.c-Alert               #[strong.c-Alert__Title Alert   :       ] This is an Alert using a generic Box Object.                (.o-Box.c-Alert              ) Use .c-Alert__Link to include a #[a.c-Alert__Link(href="") proper link].
      p.o-Box.c-Alert.c-Alert--dang #[strong.c-Alert__Title Danger  &#x0021;] An error has occurred or will occur. This cannot be undone. (.o-Box.c-Alert.c-Alert--dang) Use .c-Alert__Link to include a #[a.c-Alert__Link(href="") proper link].
      p.o-Box.c-Alert.c-Alert--cshn #[strong.c-Alert__Title Caution &#x2026;] Proceed with care. Are you sure you want to continue?       (.o-Box.c-Alert.c-Alert--cshn) Use .c-Alert__Link to include a #[a.c-Alert__Link(href="") proper link].
      p.o-Box.c-Alert.c-Alert--skss #[strong.c-Alert__Title Success &#x263a;] You have successfully completed the task as intended.       (.o-Box.c-Alert.c-Alert--skss) Use .c-Alert__Link to include a #[a.c-Alert__Link(href="") proper link].
      p.o-Box.c-Alert.c-Alert--info #[strong.c-Alert__Title Info    &#x003f;] This is some more information about a thing.                (.o-Box.c-Alert.c-Alert--info) Use .c-Alert__Link to include a #[a.c-Alert__Link(href="") proper link].
      p.o-Box.c-Alert.c-Alert--help #[strong.c-Alert__Title Help    &#x2665;] Here are some hints and tips for you. You&rsquo;re welcome. (.o-Box.c-Alert.c-Alert--help) Use .c-Alert__Link to include a #[a.c-Alert__Link(href="") proper link].
  section#label-component
    h2 The Label Component
    p.
      The Label Component builds off the Textbox Object, so include the #[code .o-Textbox] class.
      Subclasses add skins.
    figure
      h3 Example h3 #[small.o-Textbox.c-Label .o-Textbox.c-Label]
      p Example paragraph. #[small.c-Label                                   .c-Label              ]
      p Example paragraph. #[small.o-Textbox.c-Label               .o-Textbox.c-Label              ]
      p Example paragraph. #[small.o-Textbox.c-Label.c-Label--dang .o-Textbox.c-Label.c-Label--dang]
      p Example paragraph. #[small.o-Textbox.c-Label.c-Label--cshn .o-Textbox.c-Label.c-Label--cshn]
      p Example paragraph. #[small.o-Textbox.c-Label.c-Label--skss .o-Textbox.c-Label.c-Label--skss]
      p Example paragraph. #[small.o-Textbox.c-Label.c-Label--info .o-Textbox.c-Label.c-Label--info]
      p Example paragraph. #[small.o-Textbox.c-Label.c-Label--help .o-Textbox.c-Label.c-Label--help]
  section#badge-component
    h2 The Badge Component
    p.
      The Badge Component builds off the Textbox Object, so include the #[code .o-Textbox] class.
      Subclasses add skins.
    figure
      h3 Example h3 #[small.o-Textbox.c-Badge .o-Textbox.c-Badge]
      p Example p with a           .c-Badge              . #[small.c-Badge                         0]
      p Example p with a .o-Textbox.c-Badge              . #[small.o-Textbox.c-Badge               0]
      p Example p with a .o-Textbox.c-Badge.c-Badge--dang. #[small.o-Textbox.c-Badge.c-Badge--dang 2]
      p Example p with a .o-Textbox.c-Badge.c-Badge--cshn. #[small.o-Textbox.c-Badge.c-Badge--cshn 4]
      p Example p with a .o-Textbox.c-Badge.c-Badge--skss. #[small.o-Textbox.c-Badge.c-Badge--skss 16]
      p Example p with a .o-Textbox.c-Badge.c-Badge--info. #[small.o-Textbox.c-Badge.c-Badge--info 256]
      p Example p with a .o-Textbox.c-Badge.c-Badge--help. #[small.o-Textbox.c-Badge.c-Badge--help 65,536]
  section#text-level-components
    h2 Text-Level Components
    section#key-component
      h3 The Key Component
      p.
        Use #[code .o-Textbox.c-Key] to represent
        a #[span.o-Textbox.c-Key button] or #[span.o-Textbox.c-Key key]
        on a physical device. May be instantiated by the #[code kbd &gt; kbd] Element.
        Contrary to #[a Button Components],
        these Key Components are not meant to be interactive.

{'fraction_non_alphanumeric': 0.13474445018069178, 'fraction_numerical': 0.00856995353639649, 'mean_word_length': 2.2503355704697987, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '886989', 'n_tokens_mistral': 3374, 'n_tokens_neox': 3359, 'n_words': 879}