1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16

import { Collapsible } from "@gunkin/uiify";

export default function Example() {
  return (
    <Collapsible
      className=""
      slotProps={{
        trigger: { className: "" },
        panel: { className: "" },
      }}
      id="release-notes"
      label="Release notes"
      content={<>New keyboard navigation and accessibility improvements.</>}
    />
  );
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94

/* Collapsible — a single native <details>/<summary> disclosure. Same shape
   as accordion.css: [data-part] selectors let styles apply without opting
   into the BEM classes, both rules kept together so they can't drift apart. */

@layer components {
  :where([data-uiify-collapsible], [data-uiify-collapsible]) {
    inline-size: 100%;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }

  [data-uiify-collapsible] [data-part="trigger"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    list-style: none;
  }

  [data-uiify-collapsible] [data-part="trigger"]::-webkit-details-marker {
    display: none;
  }

  [data-uiify-collapsible] [data-part="trigger"]:hover {
    background-color: var(--secondary);
  }

  [data-uiify-collapsible] [data-part="trigger"]:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--ring-width) color-mix(in oklch, var(--ring) 20%, transparent);
  }

  [data-uiify-collapsible] [data-part="trigger"]::after {
    content: "+";
    display: grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: 0 0 1.5rem;
    color: var(--muted-foreground);
    font:
      1.25rem/1 ui-monospace,
      monospace;
    transition: rotate var(--duration-fast) var(--ease-out);
  }

  [data-uiify-collapsible][open] [data-part="trigger"]::after {
    content: "−";
  }

  [data-uiify-collapsible][open] [data-part="trigger"] {
    color: var(--primary);
  }

  [data-uiify-collapsible] [data-part="panel"] {
    padding-block: 0 var(--space-lg);
    padding-inline: var(--space-lg);
    color: var(--muted-foreground);
    font-size: var(--text-sm);
  }

  [data-uiify-collapsible] {
    interpolate-size: allow-keywords;
  }

  :where([data-uiify-collapsible], [data-uiify-collapsible])::details-content {
    block-size: 0;
    overflow: clip;
  }

  :where([data-uiify-collapsible], [data-uiify-collapsible])[open]::details-content {
    block-size: auto;
  }

  /* Shared presence timing; block-size only interpolates where the block above applies. */
  @media (prefers-reduced-motion: no-preference) {
    :where([data-uiify-collapsible], [data-uiify-collapsible])::details-content {
      opacity: 0;
      transition:
        opacity var(--duration-fast) var(--ease-out),
        block-size var(--duration-fast) var(--ease-out),
        content-visibility var(--duration-fast) allow-discrete;
    }

    :where([data-uiify-collapsible], [data-uiify-collapsible])[open]::details-content {
      opacity: 1;
    }
  }
}

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37

import { Collapsible } from "@gunkin/uiify";

export default function Example() {
  return (
    <Collapsible
      className={
        "group/collapsible [inline-size:100%] border-[length:var(--border-width)] border-solid border-border rounded" +
        "-xl overflow-hidden [interpolate-size:allow-keywords] [&::details-content]:[block-size:0] [&::details-conte" +
        "nt]:overflow-clip [&[open]::details-content]:[block-size:auto] motion-safe:[&::details-content]:opacity-0 m" +
        "otion-safe:[&::details-content]:[transition:opacity_var(--duration-fast)_var(--ease-out),_block-size_var(--" +
        "duration-fast)_var(--ease-out),_content-visibility_var(--duration-fast)_allow-discrete] motion-safe:[&[open" +
        "]::details-content]:opacity-100"
      }
      slotProps={{
        trigger: {
          className:
            "flex items-center justify-between gap-md p-lg text-sm " +
            "[line-height:var(--leading-normal)] font-[number:var(--weight-medium)] " +
            "cursor-pointer list-none [&::-webkit-details-marker]:hidden hover:bg-secondary " +
            "focus-visible:[outline:none] " +
            "focus-visible:[box-shadow:inset_0_0_0_var(--ring-width)_color-mix(in_oklch,_var(--ring)_20%,_transparent)] " +
            'after:content-["+"] after:grid after:place-items-center ' +
            "after:[inline-size:1.5rem] after:[block-size:1.5rem] after:[flex:0_0_1.5rem] " +
            "after:text-muted-foreground after:not-italic after:[font-variant:normal] " +
            "after:font-normal after:[font-stretch:normal] after:[font-size:1.25rem] " +
            "after:leading-none after:[font-family:ui-monospace,_monospace] " +
            "after:[transition:rotate_var(--duration-fast)_var(--ease-out)] " +
            'group-open/collapsible:after:content-["−"] group-open/collapsible:text-primary',
        },
        panel: { className: "[padding-block:0_var(--space-lg)] px-lg text-muted-foreground text-sm" },
      }}
      id="release-notes"
      label="Release notes"
      content={<>New keyboard navigation and accessibility improvements.</>}
    />
  );
}