@fpkit/acss 0.6.2 → 1.0.0-beta.1

package/src/components/details/details.scss.backup

@@ -0,0 +1,126 @@
+details {
+  --details-border: 0.0625rem solid #dfdfdf;
+  --details-direction: column;
+  --details-display: flex;
+  --details-gap: 0rem;
+  --details-h: max-content;
+  --details-justify: flex-start;
+  --details-px: 1.5rem;
+  --details-py: 1rem;
+  --details-radius: 0;
+  --details-w: 100%;
+  --max-h-closed: 6.25rem;
+  --max-h-open: 50rem;
+  --summary-align: center;
+  --summary-cursor: pointer;
+  --summary-display: flex;
+  --summary-gap: 0.5rem;
+  --summary-justify: flex-start;
+  --summary-transitions: all 0.75s ease-in-out;
+
+  interpolate-size: allow-keywords;
+  display: var(--details-display);
+  flex-direction: var(--details-direction);
+  justify-content: var(--details-justify);
+  gap: var(--details-gap);
+  width: var(--details-w);
+  border: var(--details-border);
+  border-left: none;
+  border-right: none;
+  transition: var(--summary-transitions);
+  max-height: var(--max-h-closed);
+  overflow: clip;
+
+  @starting-style {
+    transition: var(--summary-transitions);
+    color: red;
+  }
+
+  & + details {
+    border-radius: 0; // remove radius from middle elements
+    border-top: none; // optional: remove double borders
+  }
+
+  &:first-of-type {
+    border-radius: var(--details-radius) var(--details-radius) 0 0;
+  }
+
+  &:last-of-type {
+    border-radius: 0 0 var(--details-radius) var(--details-radius);
+  }
+
+  // If it's the only details element, keep original radius
+  &:only-of-type {
+    border-radius: var(--details-radius);
+  }
+
+  &::marker {
+    content: none;
+  }
+
+  summary {
+    display: var(--summary-display);
+    justify-content: var(--summary-justify);
+    align-items: var(--summary-align);
+    padding-inline: var(--summary-px, var(--details-px));
+    padding-block: var(--summary-py, var(--details-py));
+    gap: var(--summary-gap);
+    list-style: none;
+    border-top-left-radius: var(--details-radius);
+    border-top-right-radius: var(--details-radius);
+    transition: var(--summary-transitions);
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &:focus-within {
+      outline: none;
+      border-bottom: solid 2px currentColor;
+      background-color: whitesmoke;
+    }
+
+    /* This ensures no bullet points are shown */
+    &:hover {
+      cursor: var(--summary-cursor);
+    }
+    > section {
+      width: var(--details-w);
+    }
+  }
+
+  .list-styles {
+    summary {
+      border-left: none;
+      border-right: none;
+    }
+  }
+
+  > section {
+    padding-inline: var(--details-px);
+    padding-block: var(--details-py);
+    margin-block-start: 0;
+    border: 1px transparent solid;
+  }
+
+  &[open] {
+    max-height: max-content;
+    transition: var(--summary-transitions);
+    > summary {
+      border-bottom: var(--details-border);
+    }
+    > section {
+      max-height: var(--max-h-open);
+      @starting-style {
+        max-height: 0;
+      }
+    }
+  }
+
+  @supports (transition-behavior: allow-discrete) {
+    @starting-style {
+      max-height: 0;
+      transition: var(--summary-transitions);
+    }
+  }
+}

package/src/components/details/details.stories.tsx

@@ -32,6 +32,46 @@ const meta: Meta<typeof Details> = {
   title: "FP.REACT Components/Details",
   component: Details,
   tags: ["rc"],
+  parameters: {
+    docs: {
+      description: {
+        component: `Expandable/collapsible details component with smooth transitions and accessible markup.
+
+## CSS Variables
+
+### Layout & Display
+- \`--details-display\`: Display mode (default: flex)
+- \`--details-direction\`: Flex direction (default: column)
+- \`--details-justify\`: Content justification (default: flex-start)
+- \`--details-width\`: Details width (default: 100%)
+- \`--details-height\`: Details height (default: max-content)
+- \`--details-gap\`: Gap between elements (default: 0rem)
+
+### Sizing & Constraints
+- \`--details-max-height-closed\`: Max height when closed (default: 6.25rem)
+- \`--details-max-height-open\`: Max height when open (default: 50rem)
+
+### Spacing
+- \`--details-padding-inline\`: Horizontal padding (default: 1.5rem)
+- \`--details-padding-block\`: Vertical padding (default: 1rem)
+
+### Borders & Radius
+- \`--details-border\`: Border style (default: 0.0625rem solid #dfdfdf)
+- \`--details-radius\`: Border radius (default: 0)
+
+### Summary Element
+- \`--summary-display\`: Summary display mode (default: flex)
+- \`--summary-justify\`: Summary content justification (default: flex-start)
+- \`--summary-align\`: Summary vertical alignment (default: center)
+- \`--summary-gap\`: Gap within summary (default: 0.5rem)
+- \`--summary-padding-inline\`: Summary horizontal padding (fallback: \`--details-padding-inline\`)
+- \`--summary-padding-block\`: Summary vertical padding (fallback: \`--details-padding-block\`)
+- \`--summary-cursor\`: Summary cursor style (default: pointer)
+- \`--summary-transitions\`: Transition timing (default: all 0.75s ease-in-out)
+`,
+      },
+    },
+  },
   args: {
     children: content,
     icon: icon,

package/src/components/dialog/dialog.scss

@@ -1,5 +1,5 @@
 :root {
-  --dialog-min-w: max(20rem, 80%);
+  --dialog-min-width: max(20rem, 80%);
   --dialog-gap: 0.625rem;
   --dialog-border-color: lightgray;
   --dialog-border-width: thin;
@@ -33,8 +33,8 @@
 }
 
 dialog {
-  width: var(--dialog-min-w);
-  min-width: var(--min-w);
+  width: var(--dialog-min-width);
+  min-width: var(--dialog-min-width);
   gap: var(--dialog-gap);
   border: var(--dialog-border-color) var(--dialog-border-width) solid;
   border-radius: var(--dialog-border-radius);

package/src/components/dialog/dialog.scss.backup

@@ -0,0 +1,126 @@
+:root {
+  --dialog-min-w: max(20rem, 80%);
+  --dialog-gap: 0.625rem;
+  --dialog-border-color: lightgray;
+  --dialog-border-width: thin;
+  --dialog-border-style: solid;
+  --dialog-border-radius: var(--border-radius);
+  --dialog-padding: 1.5rem;
+  --dialog-padding-inline: 1rem;
+  --dialog-close-color: gray;
+  --dialog-button-bg: transparent;
+  --dialog-button-border: transparent thin solid;
+  --dialog-button-hover-bg: whitesmoke;
+  --dialog-display: flex;
+  --dialog-flex-direction: column;
+
+  /* Focus and accessibility */
+  --dialog-focus-color: #0066cc;
+  --dialog-focus-width: 0.125rem;
+  --dialog-focus-offset: 0.125rem;
+  --dialog-focus-outline: var(--dialog-focus-width) solid var(--dialog-focus-color);
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  :root {
+    --dialog-border-color: currentColor;
+    --dialog-border-width: 0.125rem;
+    --dialog-close-color: currentColor;
+    --dialog-button-border: currentColor 0.125rem solid;
+    --dialog-focus-width: 0.1875rem;
+  }
+}
+
+dialog {
+  width: var(--dialog-min-w);
+  min-width: var(--min-w);
+  gap: var(--dialog-gap);
+  border: var(--dialog-border-color) var(--dialog-border-width) solid;
+  border-radius: var(--dialog-border-radius);
+  padding: var(--dialog-padding);
+  padding-block-start: var(--dialog-padding);
+
+  /* Focus visible for keyboard navigation */
+  &:focus-visible {
+    outline: var(--dialog-focus-outline);
+    outline-offset: var(--dialog-focus-offset);
+  }
+
+  &[open] {
+    display: var(--dialog-display);
+    flex-direction: var(--dialog-flex-direction);
+    gap: var(--dialog-gap);
+  }
+
+  section {
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    gap: var(--dialog-gap);
+    flex-direction: var(--dialog-flex-direction);
+    margin-block-start: 0;
+    --sect-y: 0;
+  }
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  min-width: 100%;
+
+  h3 {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+
+  .dialog-close {
+    margin-block-end: 0;
+  }
+
+  button[type="button"] {
+    background-color: var(--dialog-button-bg);
+    border: var(--dialog-button-border);
+    cursor: pointer;
+
+    &:hover {
+      border-color: var(--dialog-close-color);
+      background-color: var(--dialog-button-hover-bg);
+    }
+
+    /* Keyboard focus indicator */
+    &:focus-visible {
+      outline: var(--dialog-focus-outline);
+      outline-offset: var(--dialog-focus-offset);
+      border-color: var(--dialog-focus-color);
+      background-color: var(--dialog-button-hover-bg);
+    }
+
+    /* Remove default focus for mouse users */
+    &:focus:not(:focus-visible) {
+      outline: none;
+    }
+  }
+}
+
+.alert-dialog-actions,
+.dialog-footer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: var(--dialog-footer-justify, flex-end);
+  gap: var(--dialog-gap);
+  width: 100%;
+
+  /* Focus styles for footer buttons */
+  button:focus-visible {
+    outline: var(--dialog-focus-outline);
+    outline-offset: var(--dialog-focus-offset);
+  }
+
+  button:focus:not(:focus-visible) {
+    outline: none;
+  }
+}

package/src/components/form/form.scss

@@ -4,14 +4,26 @@
   --input-bg: inherit;
   --input-border: none;
   --input-outline: thin solid var(--input-border-color);
-  --input-px: 0.6rem;
-  --input-py: 0.4rem;
+  --input-padding-inline: 0.6rem;
+  --input-padding-block: 0.4rem;
   --input-radius: --var(--radius);
   --input-fs: var(--fs);
-  --input-w: clamp(200px, 100%, 500px);
+  --input-width: clamp(200px, 100%, 500px);
+
+  // Focus state variables (NEW - for accessibility)
+  --input-focus-outline: medium solid var(--input-border-color);
+  --input-focus-outline-offset: 0;
+
+  // Disabled state variables (NEW)
+  --input-disabled-bg: #f5f5f5;
+  --input-disabled-opacity: 0.6;
+  --input-disabled-cursor: not-allowed;
+
+  // Placeholder variables
   --placeholder-color: gray;
   --placeholder-style: italic;
   --placeholder-fs: smaller;
+
   --form-direction: column;
   --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><polyline points='6,9 10,13 14,9' stroke='%23000000' stroke-width='1.5' fill='none' /></svg>");
 }
@@ -37,11 +49,11 @@ select {
   -webkit-appearance: var(--input-appearance);
   -moz-appearance: var(--input-appearance);
   appearance: var(--input-appearance);
-  width: var(--input-w);
+  width: var(--input-width);
   border: var(--input-border);
   outline: var(--input-outline);
-  padding-inline: var(--input-px);
-  padding-block: var(--input-py);
+  padding-inline: var(--input-padding-inline);
+  padding-block: var(--input-padding-block);
   border-radius: var(--input-radius);
   background-color: var(--input-bg, #fff);
 
@@ -53,7 +65,8 @@ select {
   }
 
   &:focus-visible, &:focus {
-    outline-width: medium;
+    outline: var(--input-focus-outline);
+    outline-offset: var(--input-focus-outline-offset);
   }
 
 
@@ -67,9 +80,12 @@ select {
     }
   }
 
-  &[aria-disabled='true'] {
+  &[aria-disabled='true'],
+  &:disabled {
     --input-border-color: lightgray;
-    cursor: not-allowed;
+    background-color: var(--input-disabled-bg);
+    opacity: var(--input-disabled-opacity);
+    cursor: var(--input-disabled-cursor);
     text-transform: capitalize;
     text-decoration: line-through;
   }

package/src/components/form/form.scss.backup

@@ -0,0 +1,87 @@
+:root {
+  --input-border-color: gray;
+  --input-appearance: none;
+  --input-bg: inherit;
+  --input-border: none;
+  --input-outline: thin solid var(--input-border-color);
+  --input-px: 0.6rem;
+  --input-py: 0.4rem;
+  --input-radius: --var(--radius);
+  --input-fs: var(--fs);
+  --input-w: clamp(200px, 100%, 500px);
+  --placeholder-color: gray;
+  --placeholder-style: italic;
+  --placeholder-fs: smaller;
+  --form-direction: column;
+  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><polyline points='6,9 10,13 14,9' stroke='%23000000' stroke-width='1.5' fill='none' /></svg>");
+}
+
+form {
+  display: flex;
+  flex-direction: var(--form-direction);
+  gap: 1rem;
+  > div {
+    display: flex;
+    gap: 1rem;
+    flex-direction: var(--form-direction);
+  }
+
+  label {
+    display: block;
+  }
+}
+
+input[type]:not([type='checkbox'], [type='radio']),
+textarea,
+select {
+  -webkit-appearance: var(--input-appearance);
+  -moz-appearance: var(--input-appearance);
+  appearance: var(--input-appearance);
+  width: var(--input-w);
+  border: var(--input-border);
+  outline: var(--input-outline);
+  padding-inline: var(--input-px);
+  padding-block: var(--input-py);
+  border-radius: var(--input-radius);
+  background-color: var(--input-bg, #fff);
+
+  &::placeholder {
+    color: var(--placeholder-color);
+    font-style: var(--placeholder-style);
+    font-size: var(--placeholder-fs);
+    text-transform: capitalize;
+  }
+
+  &:focus-visible, &:focus {
+    outline-width: medium;
+  }
+
+
+  &[aria-required='true'] {
+    &::placeholder {
+      color: var(--color-required, var(--placeholder-color));
+      font-weight: 600;
+      &::after {
+        content: '* ';
+      }
+    }
+  }
+
+  &[aria-disabled='true'] {
+    --input-border-color: lightgray;
+    cursor: not-allowed;
+    text-transform: capitalize;
+    text-decoration: line-through;
+  }
+}
+
+select {
+  border: var(--input-outline);
+  outline: none;
+  -webkit-appearance: none; /* Remove default arrow in Chrome and Safari */
+  -moz-appearance: none; /* Remove default arrow in Firefox */
+  appearance: none; /* Remove default arrow in other browsers */
+  background: var(--select-arrow) no-repeat;
+  background-position: right 0.5rem top 50%;
+  padding-inline-end: 0;
+}