-
- ✔ Do
-
+
+
- ✔ Do
-
- ✘ Don't
-
+
+
+
{{ title }}
-
@@ -13,7 +19,7 @@
\ No newline at end of file
+
diff --git a/docs/pages/colors.vue b/docs/pages/colors.vue
index de29ed610..389bbf537 100644
--- a/docs/pages/colors.vue
+++ b/docs/pages/colors.vue
@@ -1,19 +1,20 @@
-
-
+
-
-
+
-
-
-
-
+
-
✘ Don't
{{ title }}
-
- During design and development, colors should be referenced by name. Using named colors has a few important benefits: + During design and development, colors should be referenced by name. Using named colors has a + few important benefits:
- More meaningful than hex values in mockups and code
- Encourages consistency and accessibility across the application
- Support for alternate themes
- Some examples of named colors in the Kolibri Design System include: -
+Some examples of named colors in the Kolibri Design System include:
- Care must be taken as we adjust the colors in the application. There are a number of considerations to take into account, including: + Care must be taken as we adjust the colors in the application. There are a number of + considerations to take into account, including:
- Branding, aesthetics, and color harmony @@ -31,15 +33,18 @@
- Maintainability and consistency of the application and code
- Amenability to theming by using tokens correctly
Computed styles
- For technical reasons relating to supporting dynamic themes colors must be set using Javascript. Adding Vue.use(KThemePlugin) makes all colors available on every Vue component in your application under the following objects:
+ For technical reasons relating to supporting dynamic themes colors must be set using
+ Javascript. Adding Vue.use(KThemePlugin) makes all colors available on every
+ Vue component in your application under the following objects:
-
@@ -49,23 +54,22 @@
- For example, to color text using $themeTokens.error you use can a $themeTokens.error you use can a
+
- This is an error
-
+ This is an error
- This will display: -
+This will display:
- This is an error
-
+ This is an error
Move style definitions from the template to computed props if the style gets complex.
@@ -73,19 +77,22 @@Computed classes
- We also attach a special helper function $computedClass which can be used to dynamically create new classes. This is useful for specifying colors in pseudo-elements such as :hover or :focus. For example:
+ We also attach a special helper function $computedClass which can be used to
+ dynamically create new classes. This is useful for specifying colors in pseudo-elements such
+ as :hover or :focus. For example:
This is usually not necessary, and using style is preferred for simplicity when possible.
Notation
- In the references below we use the following shorthand:
+ This is usually not necessary, and using style is preferred for simplicity when
+ possible.
Notation
+In the references below we use the following shorthand:
brandrefers to$themeBrandtokensrefers to$themeTokens
@@ -94,149 +101,278 @@
- Reduce the time it takes to design and build our products @@ -12,46 +15,117 @@
- Ensure accessibility, responsiveness, and cross-browser compatibility
- Installs
$themeBrand,$themeTokens$themePalette, and$computedClasshelpers on all Vue instances (see).
- - Provides
$coreOutline,$inputModality,$mediaType, and$isPrintcomputed properties as well as$printmethod to all Vue instances.
+ -
+ Installs
$themeBrand,$themeTokens$themePalette, + and$computedClasshelpers on all Vue instances (see +). +
+ -
+ Provides
$coreOutline,$inputModality,$mediaType, + and$isPrintcomputed properties as well as$printmethod to all + Vue instances. + - Globally registers all KDS Vue components. -
- Inserts assertive and polite ARIA live regions
#k-live-regionto an application's document body (see).
- - Inserts the overlay container element
#k-overlayto an application's document body (seeor search for appendToOverlayprop on components).
+ -
+ Inserts assertive and polite ARIA live regions
#k-live-regionto an + application's document body (see +). +
+ -
+ Inserts the overlay container element
#k-overlayto an application's document + body (seeor search for + appendToOverlayprop on components). + - Directly above the content to be navigated through
- It should include the current item
- The current item can be repeated in a page header -
- Allow the single breadcrumb (
showSingleItem=true) only when there isn't any other page header or label that shows what the current level is
+ -
+ Allow the single breadcrumb (
showSingleItem=true) only when there isn't any + other page header or label that shows what the current level is + -
-
has an overview and usage guidance + + has an overview and usage guidance
- and are similar but handle events differently -
-
has a tooltip instead of a text label + and + are similar but handle events differently
+ has a tooltip instead of a text label is used for button layout
- and have more detail about adding a menu of options to a button component
+ -
+
and + + have more detail about adding a menu of options to a button component + -
- Use
KCardwithinKCardGridas its direct child () + Use KCardwithinKCardGridas its direct child + () +
+ -
+ Set a correct heading level (
) +
+ -
+ Ensure each card title is unique within a card grid (
)
- - Set a correct heading level (
)
- - Ensure each card title is unique within a card grid (
) - Do not use a heading element within the
titleslot
- - Ensure content provided via slots is accessible (
)
- - Even if a thumbnail image is available, provide a placeholder element (
)
- - If using selection controls, use pre-defined labels (
)
- - Test final cards for semantic structure, accessibility, and right-to-left support (
)
+ -
+ Ensure content provided via slots is accessible (
) +
+ -
+ Even if a thumbnail image is available, provide a placeholder element (
) +
+ -
+ If using selection controls, use pre-defined labels (
) +
+ -
+ Test final cards for semantic structure, accessibility, and right-to-left support
+ (
) + - If a page with cards has an
h1and no subsections, setheadingLevelto2to render card titles ash2.
-
- - If there's an
h2subsection with cards, setheadingLevelto3to render card titles ash3.
+ -
+ If a page with cards has an
h1and no subsections, set +headingLevelto2to render card titles ash2. +
+
+ -
+ If there's an
h2subsection with cards, setheadingLevelto +3to render card titles ash3. + - The
orientationprop decides if the thumbnail area appears above or beside other content.
+ -
+ The
orientationprop decides if the thumbnail area appears above or beside + other content. + - The
thumbnailDisplayprop manages the thumbnail's visibility and size.
- - The
thumbnailAlignmentprop sets which side the thumbnail appears on in horizontal orientation.
+ -
+ The
thumbnailAlignmentprop sets which side the thumbnail appears on in + horizontal orientation. + -
is a component for use with KCard@@ -965,4 +1178,4 @@ } } - \ No newline at end of file + diff --git a/docs/pages/kcardgrid.vue b/docs/pages/kcardgrid.vue index 7b33dbb99..6c5edc280 100644 --- a/docs/pages/kcardgrid.vue +++ b/docs/pages/kcardgrid.vue @@ -1,45 +1,109 @@- + Displays a grid of cards
-.
- -KCardGridprovides base layouts for the most common grids in our ecosystem, as well as customization or complete override of the base layouts.Together with
- -KCard, it ensures accessible navigation within card lists, such as announcing only their titles when using the tab key to avoid overwhelming screen reader outputs.Grid's visual behavior is based on the
- -. KCardGriddetermines how many cards per row to display based on its layout and a current window breakpoint.
+KCardGriddoesn't manage inner card content. This isKCard's responsibility.+
+ +KCardGridprovides base layouts for the most common grids in our ecosystem, as + well as customization or complete override of the base layouts. ++ Together with
+ +KCard, it ensures accessible navigation within card lists, such + as announcing only their titles when using the tab key to avoid overwhelming screen reader + outputs. ++ Grid's visual behavior is based on the +
+ +. KCardGriddetermines how many cards per row to display based on its layout + and a current window breakpoint. ++
KCardGriddoesn't manage inner card content. This isKCard's + responsibility. ++ -
-
KCardGridmust be a direct parent ofKCard() + KCardGridmust be a direct parent ofKCard() +
+ -
+ Avoid setting card widths. Rely on
KCardGridlayouts and customization + options (, + ) +
+ -
+ Avoid setting card heights. Instead, set heights on card sections, use text truncation, or
+ limit content in other ways (
) -
- Avoid setting card widths. Rely on
KCardGridlayouts and customization options (, ) + Ensure robust content tolerance and consistent content alignment ( ) -
- Avoid setting card heights. Instead, set heights on card sections, use text truncation, or limit content in other ways (
) + Preview cards on all screen sizes ( ) -
- Ensure robust content tolerance and consistent content alignment (
) + Configure loading skeleton cards to match the expected visual output of cards with loaded + data as closely as possible on all screen sizes ( )
- - Preview cards on all screen sizes (
)
- - Configure loading skeleton cards to match the expected visual output of cards with loaded data as closely as possible on all screen sizes (
)
Also follow
+. + Also follow +
. + + - Three base layouts are available:
+'1-1-1','1-2-2', and'1-2-3'. They determine the number of cards per row for each. + Three base layouts are available:
'1-1-1','1-2-2', and +'1-2-3'. They determine the number of cards per row for each +. + '1-1-1' grid
-Displays a grid with 1 card per row on every screen size.
++ Displays a grid with 1 card per row on every screen size. +
+ @@ -116,7 +194,15 @@ '1-2-2' grid - Displays a grid with 1 card per row on smaller screens, and 2 cards per row on medium and larger screens.
++ Displays a grid with 1 card per row on smaller screens, and 2 cards per row on medium and + larger screens. +
+ @@ -149,7 +235,7 @@ - Displays a grid with 1 card per row on smaller screens, 2 cards per row on medium screens, and 3 cards per row on larger screens.
++ Displays a grid with 1 card per row on smaller screens, 2 cards per row on medium screens, + and 3 cards per row on larger screens. +
+ @@ -235,12 +329,28 @@ - Base layouts can be customized or even completely overriden via the
+layoutOverrideprop.layoutOverridetakes an array of objects{ breakpoints, cardsPerRow, columnGap, rowGap }, where:+ Base layouts can be customized or even completely overriden via the +
layoutOverrideprop.layoutOverridetakes an array of objects +{ breakpoints, cardsPerRow, columnGap, rowGap }, where: +-
-
breakpointsis an array of0-7values corresponding to the. All other attributes in the same object take effect on these breakpoints.
- cardsPerRowoverrides the number of cards per row for the specified breakpoints.
- columnGap/rowGapoverrides grid column/row gaps for the specified breakpoints.
+ -
+
breakpointsis an array of0-7values corresponding to the +. All other attributes in the same object take effect on these breakpoints. +
+ -
+
cardsPerRowoverrides the number of cards per row for the specified + breakpoints. +
+ -
+
columnGap/rowGapoverrides grid column/row gaps for the + specified breakpoints. +
For example:
@@ -277,6 +387,7 @@ +export default { ... @@ -299,22 +410,37 @@ -Here, the base
+1-2-3layout is overriden partially. Column and row gaps are decreased to20pxon breakpoints0-1, and the number of cards per row is increased to 4 on breakpoints4-7.+ Here, the base
1-2-3layout is overriden partially. Column and row gaps are + decreased to20pxon breakpoints0-1, and the number of cards per + row is increased to 4 on breakpoints4-7. +- Card height, content tolerance and alignment + Card height, content tolerance and alignment
-Cards displayed in
- -KCardGridstretch vertically to fit their content, making a grid row height match its tallest card.Setting height on cards is discouraged. Instead, manage height bottom-up, for example by setting height on card sections, using text truncation, or other ways to limit its inner content. Such approaches ensure content tolerance, prevent from unexpected overflows or excessive height, and keep vertical alignment of card sections consistent on a grid row. This is especially important when dealing with unknown lenghts or amounts of content displayed in cards. Consider:
++ Cards displayed in
+ +KCardGridstretch vertically to fit their content, making a + grid row height match its tallest card. ++ Setting height on cards is discouraged. Instead, manage height bottom-up, for example by + setting height on card sections, using text truncation, or other ways to limit its inner + content. + Such approaches ensure content tolerance, prevent from unexpected overflows or excessive + height, and keep vertical alignment of card sections consistent on a grid row. This is + especially important when dealing with unknown lenghts or amounts of content displayed in + cards. Consider: +
-@@ -340,7 +469,10 @@ /> -+ +-@@ -402,7 +537,10 @@ /> -+ +-- ... -+...@@ -443,9 +579,7 @@ /> - - ... - + ... @@ -453,6 +587,7 @@ +export default { ... @@ -465,28 +600,46 @@ -Here,
+KCardhas the following adjustments related to its visual output in the grid:+ Here,
KCardhas the following adjustments related to its visual output in the + grid: +-
-
- Height is set on its
aboveTitleslot content, and itspreserveAboveTitleprop keeps the slot area even without content. This results in consistent alignment of all cards' titles on a grid row.
- - Similarly, height is set on its
titleslot, and the title is truncated.
+ -
+ Height is set on its
aboveTitleslot content, and its +preserveAboveTitleprop keeps the slot area even without content. This + results in consistent alignment of all cards' titles on a grid row. +
+ -
+ Similarly, height is set on its
titleslot, and the title is truncated. + - Its
belowTitleslot's content is truncated.
- - The number of pills in its
footerslot is limited to a reasonable amount.
+ -
+ The number of pills in its
footerslot is limited to a reasonable amount. +
+KCardoffers otherpreserve...props corresponding to its slots.+
KCardoffers otherpreserve...props corresponding to its slots. +Fine-tuning responsiveness
-Grid configuration can be combined with
+KCard's settings to further improve responsive experience. A common pattern is switchingKCard's horizontal orientation to vertical for smaller screens to organize content more effectively in limited space:+ Grid configuration can be combined with
KCard's settings to further improve + responsive experience. A common pattern is switchingKCard's horizontal + orientation to vertical for smaller screens to organize content more effectively in limited + space: ++ import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow'; @@ -523,13 +677,16 @@ -This technique also works for adjusting
+KCardslots content. In the following example, some metadata pills are hidden on smaller screens:+ This technique also works for adjusting
KCardslots content. In the following + example, some metadata pills are hidden on smaller screens: +- - -+ + +@@ -593,7 +744,12 @@Read - + Short Activity - - Biology - - - Ecology - + Biology + Ecology - While data is loading,
+KCardGridshows loading skeleton cards. Use theloadingprop to toggle the loading state. Note thatKCardGridinternal optimizations may affect how closely the visual loading experience matches theloadingvalue:+ While data is loading,
KCardGridshows loading skeleton cards. Use the +loadingprop to toggle the loading state. Note that +KCardGridinternal optimizations may affect how closely the visual loading + experience matches theloadingvalue: +- The loading skeletons won't be displayed for short loading times (< 1s) @@ -602,41 +758,105 @@
breakpointsis an array of0-7values corresponding to the. All other attributes in the same object take effect on these breakpoints.
- countsets the number of skeleton cards for the specified breakpoints. See.
- heightsets the height of skeleton cards for the specified breakpoints.
- orientationsets the orientation of skeleton cards for the specified breakpoints. Corresponds to.
- thumbnailDisplaysets the thumbnail display of skeleton cards for the specified breakpoints. Corresponds to.
- thumbnailAlignsets the thumbnail alignment of skeleton cards for the specified breakpoints. Corresponds to.
+ -
+
breakpointsis an array of0-7values corresponding to the +. All other attributes in the same object take effect on these breakpoints. +
+ -
+
countsets the number of skeleton cards for the specified breakpoints. See +. +
+ -
+
heightsets the height of skeleton cards for the specified breakpoints. +
+ -
+
orientationsets the orientation of skeleton cards for the specified + breakpoints. Corresponds to +. +
+ -
+
thumbnailDisplaysets the thumbnail display of skeleton cards for the + specified breakpoints. Corresponds to +. +
+ -
+
thumbnailAlignsets the thumbnail alignment of skeleton cards for the + specified breakpoints. Corresponds to +. + -
is a component for use within KCardGrid -
-
can be used to detect the current window breakpoint for + can be used to detect the current + window breakpoint for + - Aligned with container margin
- When used in a group, vertically stacked @@ -26,17 +31,27 @@
- Labels should be short and concise -
- Checkbox should not be used to make real-time changes; for this situation, use a
component instead
+ -
+ Checkbox should not be used to make real-time changes; for this situation, use a
+
component instead + - Dimensions do not exceed 48x48px
- Progress indicator uses palette.grey.v_800 @@ -22,18 +29,34 @@
- When loading new content, center the loader
- The loader can routinely appear and disappear when indicating a background task -
- Do not break the flow of information or content by placing between items (e.g. list items, content cards, table rows) +
- + Do not break the flow of information or content by placing between items (e.g. list items, + content cards, table rows) +
-
-
KCircularLoader'sminVisibleTimeisn't sufficient when switching between more components, for example as part ofv-if/v-elseblocks. In such situations,may come handy. + KCircularLoader'sminVisibleTimeisn't sufficient when switching + between more components, for example as part ofv-if/v-elseblocks. In such + situations, ++ may come handy. -
-
has an overview and usage guidance + + has an overview and usage guidance
- and are similar but handle events differently -
-
has a tooltip instead of a text label + and + are similar but handle events differently
+ has a tooltip instead of a text label is used for button layout - 4 columns for small windows (
width < 840px) - 8 columns for medium windows (
840px <= width < 960px) - 12 columns for large windows (
960px <= width) -
-
has an overview and usage guidance + + has an overview and usage guidance +
+ -
+
, , + and are all similar but handle events + differently
- , , and are all similar but handle events differently is used for button layout
- and have more detail about adding a menu of options to a button component
+ -
+
and + + have more detail about adding a menu of options to a button component + - Determinate: these loaders show a visual indicator of detectable and measurable progress percentage +
- + Determinate: these loaders show a visual indicator of detectable and measurable progress + percentage +
- Indeterminate: these loaders show an ongoing process with an unspecified or undetectable percentage completion +
- + Indeterminate: these loaders show an ongoing process with an unspecified or undetectable + percentage completion +
- Progress track uses palette.grey.v_200
- Progress indicator uses palette.grey.v_800
- Progress track height is 4px
- Include a 2px corner radius -
- Remove the corner radius when appended to other components, such as appbars or data tables +
- + Remove the corner radius when appended to other components, such as appbars or data tables +
- Can be attached to existing components such as appbars or table rows
- As a progress bar, should be near task-related metadata
Use the buttons in the example below to preview.
-Number of loading skeletons
++ Number of loading skeletons
-+ By default, the number of loading skeletons corresponds to the number of cards in a single grid row if it were full. This behavior can be overridden via the
+countattribute (below), however do not override it unless indicated in the designs.+ By default, the number of loading skeletons corresponds to the number of cards in a single + grid row if it were full. This behavior can be overridden via the +
countattribute (below), however do not override it unless indicated in the + designs. +Loading skeletons configuration
-Use the
+skeletonsConfigprop to configure skeleton cards to match the expected visual output of loaded cards on all screen sizes. Preview the layout and height of cards with loaded data and adjustskeletonsConfigaccordingly.+ Use the
-skeletonsConfigprop to configure skeleton cards to match the expected + visual output of loaded cards on all screen sizes. Preview the layout and height of cards + with loaded data and adjustskeletonsConfigaccordingly. +
+skeletonsConfigtakes an array of objects{ breakpoints, count, height, orientation, thumbnailDisplay, thumbnailAlign }, where:+
skeletonsConfigtakes an array of objects +{ breakpoints, count, height, orientation, thumbnailDisplay, thumbnailAlign }, + where: +-
-
For easier development, enable the
+debugprop to display the current breakpoint in the top left corner of the grid. Use the button in the example below to preview the debug mode.+ For easier development, enable the
debugprop to display the current breakpoint + in the top left corner of the grid. Use the button in the example below to preview the debug + mode. +@@ -676,6 +896,7 @@ +- + Load (0.5 s) -+ Load (1.2 s) -+ Load (4 s) -- Debug: {{ debug ? 'On' : 'Off' }} - +Debug: {{ debug ? 'On' : 'Off' }} export default { ... @@ -701,18 +922,36 @@ -Here, the height of loading skeleton cards is
- -400pxwith vertical orientation on breakpoints0-3, and220pxwith horizontal orientation on breakpoints4-7. This makes skeleton cards resemble loaded cards at all breakpoints, creating a smooth transition for users during data loading. Note the bottom-up approach where we begin with a base setup for all breakpoints and gradually override on higher breakpoints. This simplifies the configuration object.To get a sense of what skeleton layouts can be achieved, reload this page and the
+KCardpage to preview the loading state in all examples.+ Here, the height of loading skeleton cards is
+ +400pxwith vertical orientation + on breakpoints0-3, and220pxwith horizontal orientation on + breakpoints4-7. This makes skeleton cards resemble loaded cards at all + breakpoints, creating a smooth transition for users during data loading. Note the bottom-up + approach where we begin with a base setup for all breakpoints and gradually override on + higher breakpoints. This simplifies the configuration object. ++ To get a sense of what skeleton layouts can be achieved, reload this page and the +
-KCardpage to preview the loading state in all examples. ++ - - + The checkbox is generally used to select one of two possible values in a form.
+ + + The checked state represents an affirmative value.
- Checkboxes can also have a "partially-checked" or "indeterminate" state used in cases where the value is neither true nor false, such as when a subset of a topic is selected: + Checkboxes can also have a "partially-checked" or "indeterminate" state used in cases where + the value is neither true nor false, such as when a subset of a topic is selected:
- A user cannot enter the indeterminate state by interacting directly with the checkbox; it only occurs due to external interactions. + A user cannot enter the indeterminate state by interacting directly with the checkbox; it + only occurs due to external interactions.
+ Label content can be passed via the diff --git a/docs/pages/kcircularloader.vue b/docs/pages/kcircularloader.vue index bf6549b5a..053b44bf4 100644 --- a/docs/pages/kcircularloader.vue +++ b/docs/pages/kcircularloader.vue @@ -1,20 +1,27 @@labelproperty: - +- - In more complex situations, for example when another component is responsible for rendering the label, the default slot can be used: + In more complex situations, for example when another component is responsible for rendering + the label, the default slot can be used: - ++ - + - @@ -84,17 +117,23 @@- + + Don't wrap the default slot's content in
- +<label>:That would cause two nested
+<label>elements to be rendered asKCheckboxtakes care of it already.+ That would cause two nested
<label>elements to be rendered as +KCheckboxtakes care of it already. +- - - - Circular loaders illustrate progress by moving an indicator along a circular track. -
++ -Circular loaders illustrate progress by moving an indicator along a circular track.
for more information. - + See the + + for more information. + + + - - - The KDateRange is a modal component that contains two input components and a calendar component that - allow for a start and end date selection. + + The KDateRange is a modal component that contains two input components and a calendar + component that allow for a start and end date selection. -+ - - + - Implements a dropdown set of options, based on
. See these docs to understand the current implementation of the options object array. + Implements a dropdown set of options, based on + . See these docs to understand the current implementation of the options object array. - Notable possible for configuring the menu include: icons, text, secondary text, and dividers. + Notable possible for configuring the menu include: icons, text, secondary text, and + dividers.
- Please see the
on the buttons page for more details about how to use with a button, and a code example. + Please see the + + on the buttons page for more details about how to use with a button, and a code example. Context menu
- This component can be also used to create a context menu, which is a dropdown menu that appears when a user right-clicks on an element. + This component can be also used to create a context menu, which is a dropdown menu that + appears when a user right-clicks on an element.
- - For example, you can right click on this paragraph to see a context menu. -
+For example, you can right click on this paragraph to see a context menu.
- Note that just one context menu can be open at a time. If you right-click on this paragraph, any other context menu will close. + Note that just one context menu can be open at a time. If you right-click on this + paragraph, any other context menu will close.
- To achieve this, set the
isContextMenuprop to true. - The context menu will then be attached to the parent element. + To achieve this, set theisContextMenuprop to true. The context menu will then + be attached to the parent element....
+...
- diff --git a/docs/pages/kexternallink.vue b/docs/pages/kexternallink.vue index a4f40c03d..992d36938 100644 --- a/docs/pages/kexternallink.vue +++ b/docs/pages/kexternallink.vue @@ -1,44 +1,75 @@+ - The
KEmptyPlaceholdercomponent is used in situations where the value is not applicable ("N/A") or does not exist. It is a wide, light-gray dash, like this:+ The KEmptyPlaceholdercomponent is used in situations where the value is not + applicable ("N/A") or does not exist. It is a wide, light-gray dash, like this: +- Using the placeholder component is preferred to leaving a empty or blank space because it communicates to the user that a value could possibly exist there, and aids with visual scanning in tables, grids, and lists of data. + Using the placeholder component is preferred to leaving a empty or blank space because it + communicates to the user that a value could possibly exist there, and aids with + visual scanning in tables, grids, and lists of data.
+ - In the example below, an average score cannot be calculated until the user has attempted at least one exercise: + In the example below, an average score cannot be calculated until the user has attempted at + least one exercise:
- - Username - -- Number of exercises - -- Average score - +Username +Number of exercises +Average score - - user_1 - -- 11 - -- 85% - +user_1 +11 +85% - - user_2 - -- 0 - +user_2 +0 - - user_3 - -- 5 - -- 100% - +user_3 +5 +100% - - diff --git a/docs/pages/kfixedgrid.vue b/docs/pages/kfixedgrid.vue index bfdea6293..208bfb718 100644 --- a/docs/pages/kfixedgrid.vue +++ b/docs/pages/kfixedgrid.vue @@ -1,12 +1,17 @@+ - Creates an
<a>tag and is appropriate for links that use server-side routing. + Creates an<a>tag and is appropriate for links that use server-side + routing.-
+ -
+ - and buttons: -
+and buttons:
- - - - + + + + + - diff --git a/docs/pages/kfixedgriditem.vue b/docs/pages/kfixedgriditem.vue index 0b4a419fd..a3f32ba7f 100644 --- a/docs/pages/kfixedgriditem.vue +++ b/docs/pages/kfixedgriditem.vue @@ -1,12 +1,14 @@+ - Grid layout with a fixed number of columns. Use with
. + Grid layout with a fixed number of columns. Use with + . - For a responsive grid with a variable number of columns based on screen size, see
and . + For a responsive grid with a variable number of columns based on screen size, see + and . - diff --git a/docs/pages/kfocustrap.vue b/docs/pages/kfocustrap.vue index ea663f8e2..e121bef1e 100644 --- a/docs/pages/kfocustrap.vue +++ b/docs/pages/kfocustrap.vue @@ -1,20 +1,21 @@+ + For use within
. - For use within
-. - - For a responsive grid with a variable number of columns based on screen size, see
and . + For a responsive grid with a variable number of columns based on screen size, see + and . - - - \ No newline at end of file diff --git a/docs/pages/kgrid.vue b/docs/pages/kgrid.vue index 48515dcc8..07b8b9fcf 100644 --- a/docs/pages/kgrid.vue +++ b/docs/pages/kgrid.vue @@ -1,23 +1,26 @@+ - The
KFocusTrapcomponent ensures that keyboard focus is trapped within a specific region of the page. + TheKFocusTrapcomponent ensures that keyboard focus is trapped within a + specific region of the page.- When the
-disabledprop is set totrue, focus trapping is disabled, allowing normal tab behavior. The focus trap moves the focus between the first and last elements in the slot content. + When thedisabledprop is set totrue, focus trapping is disabled, + allowing normal tab behavior. The focus trap moves the focus between the first and last + elements in the slot content.- diff --git a/docs/pages/kgriditem.vue b/docs/pages/kgriditem.vue index 3d758446f..33ceb0e41 100644 --- a/docs/pages/kgriditem.vue +++ b/docs/pages/kgriditem.vue @@ -1,21 +1,21 @@- - Grid layout with a dynamic number of columns based on the current window width. -
-- The grid will have: -
++ Grid layout with a dynamic number of columns based on the current window width.
+The grid will have:
- Use with
, which accept "layout objects" as props. These layout objects can define values for span,alignment, or both. + Use with, which accept "layout objects" as props. + These layout objects can define values for span,alignment, or + both.- For a grid with a fixed number of columns, see
and . + For a grid with a fixed number of columns, see + and + . - diff --git a/docs/pages/kicon.vue b/docs/pages/kicon.vue index a8621dcce..8eb72b8ed 100644 --- a/docs/pages/kicon.vue +++ b/docs/pages/kicon.vue @@ -1,8 +1,18 @@- - - For use within
+. - + For use within
. - Layout input objects can define values for
+span,alignment, or both. They can define different layouts for different screen sizes which is very convenient for quickly building responsive layouts. + Layout input objects can define values forspan,alignment, or + both. They can define different layouts for different screen sizes which is very convenient + for quickly building responsive layouts.If no span is defined for a particular grid item, it span the full width of the grid.
- If no span is defined for a particular grid item, it span the full width of the grid. + If no alignment is defined for a particular layout, the item's contents will be + left-aligned.
-- If no alignment is defined for a particular layout, the item's contents will be left-aligned. -
-- diff --git a/docs/pages/kiconbutton.vue b/docs/pages/kiconbutton.vue index ac0013e6a..9fae2d11a 100644 --- a/docs/pages/kiconbutton.vue +++ b/docs/pages/kiconbutton.vue @@ -1,34 +1,75 @@- See for design guidance and a list of available icons. If an invalid icon is used, in development Vue.js validation will warn about the error. The icon will display as a broken image icon. + + See + + for design guidance and a list of available icons. If an invalid icon is used, in development + Vue.js validation will warn about the error. The icon will display as a broken image + icon. - - diff --git a/docs/pages/kimg.vue b/docs/pages/kimg.vue index 19f82ecf5..a85b8c788 100644 --- a/docs/pages/kimg.vue +++ b/docs/pages/kimg.vue @@ -1,32 +1,52 @@- - Use
+in situations where larger buttons with visible text would hinder the user experience. Use the flat secondary style unless the action should be highlighted. - - A tooltip with the name of the action is required for an icon button. + Use
+in situations where larger buttons with + visible text would hinder the user experience. Use the flat secondary style unless the + action should be highlighted. A tooltip with the name of the action is required for an icon button.
- - - - + + + + + - -
+KImgdisplays an image and provides functionality to manipulate it such as setting its dimensions, aspect ratio, scaling, letterboxing, and more.+ -+
KImgdisplays an image and provides functionality to manipulate it such as + setting its dimensions, aspect ratio, scaling, letterboxing, and more. ++ Unless you set fixed dimensions,
KImgis responsive by default.- Note that the majority of settings are applied to the image container rather than the image itself. If you need to apply dimensions, aspect ratio, etc. directly to the image, you can use
'fitXY'- scale type - . + Note that the majority of settings are applied to the image container rather than the + image itself. + If you need to apply dimensions, aspect ratio, etc. directly to the image, you can use +'fitXY'+scale type .- Depending on the scale type and other settings, the image may be letterboxed. When an image is letterboxed,
-+ Depending on the scale type and other settings, the image may be letterboxed. When an image + is letterboxed, + + (gray by default) fills the remaining space.backgroundColor-This is in more detail illustrated in the examples below, where the original image dimensions are 200×114 px.
++ This is in more detail illustrated in the examples below, where the original image + dimensions are 200×114 px. +
Rendering within inline and block elements
Inline
-When rendered within an inline element, the image preserves its original dimensions by default.
++ When rendered within an inline element, the image preserves its original dimensions by + default. +
@@ -45,13 +65,12 @@ - Block
- When rendered within a block element, the image container fills the parent block element and the image scales with the
'centerInside'- scale type - by default. + When rendered within a block element, the image container fills the parent block element and + the image scales with the'centerInside'+scale type by default.@@ -74,7 +93,12 @@ Alternative text
- Unless an image is
@@ -87,9 +111,11 @@, you need to provide alternative text via + Unless an image is + , you need to provide alternative text via + altText- If it's meant to be decorative, indicate it by using
+ If it's meant to be decorative, indicate it by using + . Alternative text won't be required in this case and the image will be hidden from + assistive technologies.isDecorative-@@ -99,19 +125,21 @@ /> -- Scaling -
+Scaling
- The
- scale type - determines how an image scales within the image container. + Thescale type determines + how an image scales within the image container.
-'centerInside'scale typeScales an image uniformly and maintains its original aspect ratio. Both its width and height are equal to or less than the width and height of the image container. An image can be letterboxed. It's the safest mode as it never distorts an image or impairs its quality.
++ Scales an image uniformly and maintains its original aspect ratio. Both its width and height + are equal to or less than the width and height of the image container. An image can be + letterboxed. It's the safest mode as it + never distorts an image or impairs its quality. +
@@ -136,7 +164,12 @@
-'contain'scale typeBehaves similarly to
+'centerInside'except it ensures that at least one axis of an image fits the image container exactly. The original aspect ratio is maintained. An image can be letterboxed. This mode may impair an image's quality by enlarging it above its original size.+ Behaves similarly to
'centerInside'except it ensures that at least one axis of + an image fits the image container exactly. The original aspect ratio is maintained. An image + can be letterboxed. This mode + may impair an image's quality by enlarging it above its original size. +@@ -161,7 +194,12 @@
-'fitXY'scale typeScales X and Y axis of an image independently, so that the image matches the container exactly. An image is never letterboxed. This mode may impair an image's quality by enlarging it above its original size, or distort its aspect ratio.
++ Scales X and Y axis of an image independently, so that the image matches the container + exactly. An image is never letterboxed. This mode + may impair an image's quality by enlarging it above its original size, or distort its + aspect ratio. +
@@ -187,13 +225,19 @@Aspect ratio
- You can set the aspect ratio of the image container with + You can set the aspect ratio of the image container with
-aspectRatio-Note that the ratio styles calculations need to have the width information, therefore it needs to be available in some way. For example, you can set the width directly on
+KImg. Alternatively, you could ensure thatKImg's parent element has width by setting it explicitly or by using a block element.+ Note that the ratio styles calculations need to have the width information, therefore it + needs to be available in some way. For example, you can set the width directly on +
KImg. Alternatively, you could ensure thatKImg's parent element + has width by setting it explicitly or by using a block element. +@@ -217,9 +261,14 @@Placeholder area
- The placeholder area is displayed when an image is not available. The area respects the dimensions set on the image container and is gray by default. You can change the area color via
+ The placeholder area is displayed when an image is not available. The area respects the + dimensions set on the image container and is gray by default. You can change the area color + via + backgroundColor-+ + and use the +#placeholder@@ -250,7 +306,14 @@ :style="{ maxWidth: '200px' }" > - + @@ -261,15 +324,20 @@ Displaying content on top of an image
- Use
+ Use + + slots to place content on top of the image container.#topLeft-+ , +#topRight-+ , +#bottomLeft-+ , or +#bottomRight-@@ -278,7 +346,14 @@ altText="A sitting hummingbird" > - + Top left @@ -290,16 +365,20 @@ altText="A sitting hummingbird" > - + Top left - - - diff --git a/docs/pages/klinearloader.vue b/docs/pages/klinearloader.vue index 8ceab7685..82fb44375 100644 --- a/docs/pages/klinearloader.vue +++ b/docs/pages/klinearloader.vue @@ -1,14 +1,20 @@ - - diff --git a/docs/pages/klistwithoverflow.vue b/docs/pages/klistwithoverflow.vue index fa7bc5570..c8f895293 100644 --- a/docs/pages/klistwithoverflow.vue +++ b/docs/pages/klistwithoverflow.vue @@ -1,20 +1,29 @@+ - Linear loaders illustrate progress by moving an indicator along a horizontal track. There are two types of linear loaders: + Linear loaders illustrate progress by moving an indicator along a horizontal track. There + are two types of linear loaders:
-
-
for more information. - + See the + + for more information. - + - + - + - The
KListWithOverflowcomponent is useful when we want a horizontal list that is responsive and adaptable to the container size. The list only shows the items that fit on the container element. When items exceed the available space, the component seamlessly integrates a "see more" button to show additional items. + TheKListWithOverflowcomponent is useful when we want a horizontal list that + is responsive and adaptable to the container size. The list only shows the items that fit on + the container element. When items exceed the available space, the component seamlessly + integrates a "see more" button to show additional items.+ - When a number of items fit within the screen boundaries, the list will be displayed without any changes. For example, since there are only 3 items here, we can see the entire list without problems. + When a number of items fit within the screen boundaries, the list will be displayed without + any changes. For example, since there are only 3 items here, we can see the entire list + without problems.
- + - @@ -39,13 +46,13 @@+ - But if the list becomes very long, and does not fit within the screen, then the overflowed items will be cut, and an element will be placed to show more. For example, here are 12 items in the list. + But if the list becomes very long, and does not fit within the screen, then the overflowed + items will be cut, and an element will be placed to show more. For example, here are 12 + items in the list.
-- + - + - The following is a code example to render the above examples: -
+The following is a code example to render the above examples:
- +- + - -+ data() { return { @@ -115,14 +113,14 @@ - You can also use dividers within the list by passing a
{ type: "divider" }object, and set a #divider slot. - Note that the visible list will not end with a divider. And a divider object will not be passed as a first overflowed item. + You can also use dividers within the list by passing a +{ type: "divider" }object, and set a #divider slot. Note that the visible list + will not end with a divider. And a divider object will not be passed as a first overflowed + item.- + - @@ -152,12 +148,11 @@+ - To use dividers, you can include a divider object in the items list, and add a #divider slot. + To use dividers, you can include a divider object in the items list, and add a #divider + slot.
- + @@ -167,6 +162,7 @@ +data() { return { @@ -182,7 +178,6 @@ - @@ -206,7 +201,7 @@ return Array.from({ length: number }, (_, i) => dividerMod && i && i % dividerMod === 0 ? { type: 'divider' } - : { label: `Item ${i + 1}`, icon: 'edit' } + : { label: `Item ${i + 1}`, icon: 'edit' }, ); }, }, diff --git a/docs/pages/klogo.vue b/docs/pages/klogo.vue index c39801023..8ff34c83f 100644 --- a/docs/pages/klogo.vue +++ b/docs/pages/klogo.vue @@ -1,11 +1,20 @@- -
+KLogodisplays the Kolibri logo and provides functionality to manipulate it such as setting its dimensions, color scheme, animation, and background.+ -+
KLogodisplays the Kolibri logo and provides functionality to manipulate it + such as setting its dimensions, color scheme, animation, and background. ++ Default display
Shows Kolibri logo.
@@ -15,10 +24,8 @@ altText="Kolibri Logo" :size="150" /> - -
-
Darken utilities
-You can apply darken utilities $darken1, $darken2, and $darken3 to palette colors and tokens to achieve their darker shades. They are available on every Vue component.
+ You can apply darken utilities $darken1, $darken2, and
+ $darken3 to palette colors and tokens to achieve their darker shades. They are
+ available on every Vue component.
+
- base
-
-
- $darken1
-
-
- $darken2
-
-
- $darken3
-
+ base
+ $darken1
+ $darken2
+ $darken3
+
-
-
-
+
-
-
+
-
+
-
-
-
-
-
-
+ 
+
- 
+
- 
+
- 
+
-
+
+
-
+ 
-
+
- 
+
- 
+
-
+
-
diff --git a/docs/pages/filters/index.vue b/docs/pages/filters/index.vue
index 66a9e724b..a96703ed4 100644
--- a/docs/pages/filters/index.vue
+++ b/docs/pages/filters/index.vue
@@ -1,105 +1,163 @@
-
-
+
-
- 
-
diff --git a/docs/pages/glossary/index.vue b/docs/pages/glossary/index.vue
index 30baf2096..924fec84b 100644
--- a/docs/pages/glossary/index.vue
+++ b/docs/pages/glossary/index.vue
@@ -1,45 +1,61 @@
-
-
+
-
-
+
-
diff --git a/docs/pages/icons/IconBlock.vue b/docs/pages/icons/IconBlock.vue
index 989f80feb..91cc08757 100644
--- a/docs/pages/icons/IconBlock.vue
+++ b/docs/pages/icons/IconBlock.vue
@@ -9,7 +9,10 @@
/>
base
+
-
-
-
@@ -335,7 +501,7 @@
for (const color in this.$themePalette) {
if (color !== 'grey' && typeof this.$themePalette[color] === 'object') {
palette.push(
- Object.keys(this.$themePalette[color]).map(variant => `palette.${color}.${variant}`)
+ Object.keys(this.$themePalette[color]).map(variant => `palette.${color}.${variant}`),
);
}
}
diff --git a/docs/pages/errors/index.vue b/docs/pages/errors/index.vue
index c8abf6269..ed364eec3 100644
--- a/docs/pages/errors/index.vue
+++ b/docs/pages/errors/index.vue
@@ -1,189 +1,223 @@
$darken1
+
-
+
$darken2
+
-
+
+
Default primary brand color. Commonly used for interactive elements
-
- Default dark variant of the primary brand color. Commonly used for the hover state of interactive elements
+
+ Default dark variant of the primary brand color. Commonly used for the hover state of
+ interactive elements
-
+
Default secondary brand color
-
+
Default dark variant of the secondary brand color
+
Default background color
-
+
Default app bar component color
-
+
Default dark color of the app bar component
-
+
Hyperlink text color with the application
-
+
Used for divider lines and rules
-
+
Color for loaders, spinners, and other progress indicators
-
+
Indicates the successful completion of an action in the application
+
Normal text color. (Typically used on top of the
-
- Text color with lower visual weight. (Typically used on top of the
+ Text color with lower visual weight. (Typically used on top of the
+
-
- Text color with lowest visual weight. (Typically used on top of the
+ Text color with lowest visual weight. (Typically used on top of the
+
-
- Text color for creating sufficient contrast when used on dark backgrounds (such as
+ Text color for creating sufficient contrast when used on dark backgrounds (such as
+
-
+
Used to indicate keyboard focus
-
+
Indicates an application or validation error
+
Indicates "in-progress" learner activity
-
+
Indicates learner mastery or completion
-
+
Indicates a correct response by a learner
-
+
Indicates an incorrect response by a learner
+
Used for coloring coach content icons
-
+
Used for coloring super admin permission key icons
-
+
-
+
-
- $darken3
These utilities shouldn't be overused. Always check if there is a shade in the palette available that can be used instead.
++ These utilities shouldn't be overused. Always check if there is a shade in the palette + available that can be used instead. +
- -- Color tokens are the most important set of named colors because they have a specific, well-defined usage within the application. Over time, our set of tokens should grow and shrink as necessary to fit the needs of the application. + Color tokens are the most important set of named colors because they have a specific, + well-defined usage within the application. Over time, our set of tokens should grow and + shrink as necessary to fit the needs of the application.
- Color tokens are by themselves abstract and defined by a purpose, not a color value. A theme makes them concrete by mapping them to specific
-
- When using tokens, it's very important to choose them based on their semantic purpose, not because of their color values. This ensures that new themes can be created effectively. + When using tokens, it's very important to choose them based on their semantic purpose, not + because of their color values. This ensures that new themes can be created effectively.
Brand shortcuts
-UI Colors
-Text
-$themeTokens.surface color)
$themeTokens.surface color)
+ $themeTokens.surface color)
$themeTokens.surface color)
+ $themeTokens.surface color)
$themeTokens.primary)
+ $themeTokens.primary)
Learner activity
-User-related labels
-Content-related labels
-
- A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a particular color hue. In the Kolibri Design System, we follow v_100, v_200, v_300, v_400, v_500, v_600:
+ A color scale – sometimes called a color ramp – is an evenly-spaced ramp of shades for a
+ particular color hue. In the Kolibri Design System, we follow
+ v_100, v_200,
+ v_300, v_400, v_500, v_600:
- Due to the inconsistent way that humans perceive color and light, computing these scales is
- Brand colors are chosen to reflect the mood, identity, or trademark of an application or an organization. The design system defines primary (dominant) and secondary (accent) branded color hues. + Brand colors are chosen to reflect the mood, identity, or trademark of an application or an + organization. The design system defines primary (dominant) and secondary (accent) branded + color hues.
@@ -272,24 +423,41 @@
/>
- A color palette is a set of generic base colors that cover a wide range of the color spectrum. We use the
- In our design system, colors from the palette have names like pink, grey, and amber.
+ In our design system, colors from the palette have names like pink,
+ grey, and amber.
- With the exception of grey values, choosing arbitrary colors from the palette is only slightly better than choosing arbitrary hex values from the full color spectrum. No consistency or meaning is ensured, and they should generally be avoided in favor of specific color tokens and brand colors. + With the exception of grey values, choosing arbitrary colors from the palette is only + slightly better than choosing arbitrary hex values from the full color spectrum. No + consistency or meaning is ensured, and they should generally be avoided in favor of specific + color tokens and brand colors.
Grey values
A scale of standard greys
-- Errors occur when the software fails to do what the user expected it to or when the system fails. The system should display clear messages to help users identify when these errors happen and ways to quickly understand and resolve them. + Errors occur when the software fails to do what the user expected it to or when the system + fails. The system should display clear messages to help users identify when these errors + happen and ways to quickly understand and resolve them.
- User errors -
+User errors
- User errors occur when a user input or interaction isn’t understood by the system. Examples include invalid field inputs and accessing blocked pages. + User errors occur when a user input or interaction isn’t understood by the system. Examples + include invalid field inputs and accessing blocked pages.
-- System errors -
+System errors
- System errors are usually caused by factors that are not the fault of the user. Examples include connectivity or network issues, missing data or page not found, and other unexpected issues. + System errors are usually caused by factors that are not the fault of the user. Examples + include connectivity or network issues, missing data or page not found, and other unexpected + issues.
- Follow the
- Error messages should also be actionable. Offer the solution as an action when possible and make sure the action label is specific to the outcome. If including an action isn’t possible, then briefly explain how the user can fix their problem. + Error messages should also be actionable. Offer the solution as an action when possible and + make sure the action label is specific to the outcome. If including an action isn’t + possible, then briefly explain how the user can fix their problem.
- “Sorry, something went wrong. Refresh page" -
+“Sorry, something went wrong. Refresh page"
- “500 internal server error. It looks like the server failed to fulfill an apparently valid GET or POST request. We are aware of this issue and you can try solving it by reloading the page. We apologize for the inconvenience and hope this doesn’t occur again.” + “500 internal server error. It looks like the server failed to fulfill an apparently + valid GET or POST request. We are aware of this issue and you can try solving it by + reloading the page. We apologize for the inconvenience and hope this doesn’t occur + again.”
- Tone -
+Tone
- Let the user know what went wrong without blaming them. Do not use all caps, exclamation points, or other alarmist language. + Let the user know what went wrong without blaming them. Do not use all caps, exclamation + points, or other alarmist language.
- “Please enter a valid email” -
+“Please enter a valid email”
-- “WARNING!! You didn’t fill this out” -
+“WARNING!! You didn’t fill this out”
- Even though errors can induce negative emotions, avoid being too whimsical and lighthearted. This can have the opposite effect and cause more frustration. + Even though errors can induce negative emotions, avoid being too whimsical and lighthearted. + This can have the opposite effect and cause more frustration.
- “Storage limit reached” -
+“Storage limit reached”
-- “Whoops! Looks like the tank is too full 😎" -
+“Whoops! Looks like the tank is too full 😎"
- Color -
+Color
- Icon -
+Icon
Sizes: 14px, 24px
Banner
- Sizes: 14px, 24px
+ Banners are appended to the app bar and notify the user about global system errors and/or
+ notifications that affect the whole app experience.
- Banner -
+
+ Error summary
- Banners are appended to the app bar and notify the user about global system errors and/or notifications that affect the whole app experience. + Error summaries should appear at the top of the page and use an alert component. Use them in + forms or for page-level errors that are not associated with a specific component or location + on the page.
-
- - Error summary -
+
+ Inline error messages
- Error summaries should appear at the top of the page and use an alert component. Use them in forms or for page-level errors that are not associated with a specific component or location on the page.
+ Place inline error messages in close proximity to where the error occurred. This can be an
+ icon only, or icon and text. When paired with text, use KLabeledIcon
- - Inline error messages -
+
+ Page error
- Place inline error messages in close proximity to where the error occurred. This can be an icon only, or icon and text. When paired with text, use KLabeledIcon
+ Sometimes pages do not load because of 404 or 500 errors, unsupported browsers, and
+ restricted permissions. Users should see a brief explanation of what went wrong and an
+ action that might help address the problem.
- - Page error -
-- Sometimes pages do not load because of 404 or 500 errors, unsupported browsers, and restricted permissions. Users should see a brief explanation of what went wrong and an action that might help address the problem. -
-
+
- One of the best ways to handle errors is to prevent them from happening in the first place. Following is a non-exhaustive list of common patterns that our products use to minimize the chance of users experiencing frustration from errors. + One of the best ways to handle errors is to prevent them from happening in the first place. + Following is a non-exhaustive list of common patterns that our products use to minimize the + chance of users experiencing frustration from errors.
-- Disable, don't hide -
+Disable, don't hide
- If an operation can cause unintentional and irreversible data loss, or will create errors under the current condition, disable the action rather than hiding it. Disabling it provides the user with context as to what is possible. It should be clear to the user what they need to do for the action to become possible. + If an operation can cause unintentional and irreversible data loss, or will create errors + under the current condition, disable the action rather than hiding it. Disabling it provides + the user with context as to what is possible. It should be clear to the user what they need + to do for the action to become possible.
-
+
- However, forms that create or update data generally should not have a disabled submit button and follow our form validation patterns instead. + However, forms that create or update data generally should not have a disabled submit button + and follow our form validation patterns instead.
-- Warnings -
+Warnings
- For operations that imply risky permanent data loss, use modals for the user to confirm they really intend to remove that data. Be sure to clearly explain the consequences. + For operations that imply risky permanent data loss, use modals for the user to confirm they + really intend to remove that data. Be sure to clearly explain the consequences.
- For conditions which partially block or interrupt the user experience, use a warning icon with palette.orange.v_200 and informative language of the consequences under the current condition.
+ For conditions which partially block or interrupt the user experience, use a warning icon
+ with palette.orange.v_200 and informative language of the consequences under
+ the current condition.
- - Undo -
+
+ Undo
- Modals are helpful for preventing errors but should not be overused since they can disrupt user flow. For operations with relatively significant but not critical consequences, provide the option to undo an action. + Modals are helpful for preventing errors but should not be overused since they can disrupt + user flow. For operations with relatively significant but not critical consequences, provide + the option to undo an action.
-
- - Good defaults -
+
+ Good defaults
- Especially for repetitive, common actions, setting configurations to known commonly used defaults can help people save time and avoid overlooking unintentional errors. + Especially for repetitive, common actions, setting configurations to + known commonly used defaults can help people save time and avoid + overlooking unintentional errors.
-- Progressive disclosure -
+Progressive disclosure
- Error messages are important, but should not overwhelm the user. Apply the concept of
- For error messages, this means not showing all error messages at once. Show enough information for the user to discover where the problem is, and present the detail they need at the moment of resolving the error. + For error messages, this means not showing all error messages at once. Show enough + information for the user to discover where the problem is, and present the detail they need + at the moment of resolving the error.
+
-
+
- Do not use red color as the only indicator for errors. Color alone is not sufficient to indicate an error state. Errors must be accompanied by an additional visual indicator such as an icon as mentioned in
- Important information to resolve errors should also be keyboard accessible. Avoid using snackbars and tooltips as the primary way to access this critical information. + Important information to resolve errors should also be keyboard accessible. Avoid using + snackbars and tooltips as the primary way to access this critical information.
- Filters allow users to show or hide data from view and can also be used to narrow down displayed information to a specific criteria. Filters can be placed in interfaces with search functionality and can accompany other components and patterns like lists and data tables. + Filters allow users to show or hide data from view and can also be used to narrow down + displayed information to a specific criteria. Filters can be placed in interfaces with + search functionality and can accompany other components and patterns like lists and data + tables.
- Dropdown menus -
-- Use dropdown menu filters when you would like users to filter by one criteria at a time and when there are less than 10 options to select from. -
-
-
- Dropdown menu filters use the
+ Use dropdown menu filters when you would like users to filter by one criteria at a time and
+ when there are less than 10 options to select from.
+
+ Dropdown menu filters use the
+
- Text input dropdowns use the
- Use text filters to help users narrow down lists or tables that contain many items. Text filters should be right-aligned above lists and tables.
+ Use text filters to help users narrow down lists or tables that contain many items. Text
+ filters should be right-aligned above lists and tables.
- By default, results should update as the user types. If updating as the user types would cause noticeable performance and load time issues, then update the list of results after the user loses focus on the text filter.
+ By default, results should update as the user types. If updating as the user types would
+ cause noticeable performance and load time issues, then update the list of results after the
+ user loses focus on the text filter.
- Placeholder text should let the user know what data can be filtered when they input text. State this concisely in the imperative form.
+ Placeholder text should let the user know what data can be filtered when they input text.
+ State this concisely in the imperative form.
- Use a checkbox list if you’d like to allow multiple options within a category to be filtered for at once. They can also be used when you’d like to provide more visibility to the options themselves.
+ Use a checkbox list if you’d like to allow multiple options within a category to be filtered
+ for at once. They can also be used when you’d like to provide more visibility to the options
+ themselves.
- By default, the list of results should update as the user selects different checkbox options.
-
- Frame the text of options concisely and as affirmative statements.
+ By default, the list of results should update as the user selects different checkbox
+ options.
Frame the text of options concisely and as affirmative statements.
- Any filters that have been applied should persist on refresh or browser back.
- Any filters that have been applied should persist on refresh or browser back.
- By default, data should be filtered by the “all data” option. However, pre-filtering to one or more options can happen in exceptional cases where doing so improves the experience.
+ By default, data should be filtered by the “all data” option. However, pre-filtering to one
+ or more options can happen in exceptional cases where doing so improves the experience.
- If selecting a filter option would result in “0 results” being shown, that option should be hidden from the dropdown, hide the filter option. If all filter options in a dropdown would always result in “0 results,” hide the entire filter.
+ If selecting a filter option would result in “0 results” being shown, that option should be
+ hidden from the dropdown, hide the filter option. If all filter options in a dropdown would
+ always result in “0 results,” hide the entire filter.
- If one or more filters have already been applied, and combining remaining filter options would show “0 results,” those remaining filters should be disabled. If all potential remaining selections in a filter dropdown/section will show “0 results,” disable the entire filter section until the current filter sections are cleared.
+ If one or more filters have already been applied, and combining remaining filter options
+ would show “0 results,” those remaining filters should be disabled. If all potential
+ remaining selections in a filter dropdown/section will show “0 results,” disable the entire
+ filter section until the current filter sections are cleared.
- Filters can be flexibly combined in groups horizontally or vertically to create a more customized filtering experience.
+ Filters can be flexibly combined in groups horizontally or vertically to create a more
+ customized filtering experience.
- Text filters and dropdown filters should be aligned in the same row when placed above data tables.
+ Text filters and dropdown filters should be aligned in the same row when placed above data
+ tables.
- Filters can also be left-aligned for lists and search results. Use clearable chips to show which filters have been selected and offer the option to clear all selected filters.
+ Filters can also be left-aligned for lists and search results. Use clearable chips to show
+ which filters have been selected and offer the option to clear all selected filters.
Dropdown menus
+
+ Text input dropdowns
- 
+
- Text filters
-
+ Text filters
+
+
- 
+
- Checkbox lists
-
+ Checkbox lists
+
- 
+
Hiding vs disabling
- Layout
-
+ Layout
+
+
- Certain words have special meanings in the context of the Kolibri ecosystem which might be different or more specific than when used in general language. Additionally, many of the terms have been carefully chosen from among alternatives, and it's important to consistently use this terminology across the product ecosystem. + Certain words have special meanings in the context of the Kolibri ecosystem which might be + different or more specific than when used in general language. Additionally, many of the + terms have been carefully chosen from among alternatives, and it's important to consistently + use this terminology across the product ecosystem.
- The glossary is stored in the
| - Term - | +Term | Part of speech | -- Description - | +Description |
|---|---|---|---|---|
|
{{ term.term }}
- |
- {{ term.note }} | ++ {{ term.note }} + | {{ term.description }} |
-
+
-
-
+
-
+
-
-
-
-
-
+
-
-
-
+
+
-
+
-
+
-
-
+
-
+
-
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index ea2704d12..c8ccbe194 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -1,10 +1,13 @@
-
-
+
-
+
-
+
-
+
-
diff --git a/docs/pages/installation.vue b/docs/pages/installation.vue
index 442731521..17e8491fe 100644
--- a/docs/pages/installation.vue
+++ b/docs/pages/installation.vue
@@ -1,41 +1,69 @@
-
-
-
+
- import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin';
- import trackInputModality from 'kolibri-design-system/lib/styles/trackInputModality';
- import trackMediaType from 'kolibri-design-system/lib/styles/trackMediaType';
-
- Vue.use(KThemePlugin);
-
- trackInputModality();
- trackMediaType();
+ import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin'; import trackInputModality
+ from 'kolibri-design-system/lib/styles/trackInputModality'; import trackMediaType from
+ 'kolibri-design-system/lib/styles/trackMediaType'; Vue.use(KThemePlugin);
+ trackInputModality(); trackMediaType();
This ensures the following:
-
+
-
-
diff --git a/docs/pages/kbreadcrumbs.vue b/docs/pages/kbreadcrumbs.vue
index c00bfcf90..921e7693a 100644
--- a/docs/pages/kbreadcrumbs.vue
+++ b/docs/pages/kbreadcrumbs.vue
@@ -1,10 +1,13 @@
-
-
+
{{ aliasItem }}
-
@@ -127,22 +121,22 @@
!KolibriIcons[alias].learningActivity &&
!KolibriIcons[alias].resourceCategory
);
- })
+ }),
).filter(this.termFilter);
},
withColor() {
return sortedIconAliases(
- getIconGroups(alias => Boolean(KolibriIcons[alias].defaultColor))
+ getIconGroups(alias => Boolean(KolibriIcons[alias].defaultColor)),
).filter(this.termFilter);
},
learningActivities() {
return sortedIconAliases(
- getIconGroups(alias => Boolean(KolibriIcons[alias].learningActivity))
+ getIconGroups(alias => Boolean(KolibriIcons[alias].learningActivity)),
).filter(this.termFilter);
},
resourceCategories() {
return sortedIconAliases(
- getIconGroups(alias => Boolean(KolibriIcons[alias].resourceCategory))
+ getIconGroups(alias => Boolean(KolibriIcons[alias].resourceCategory)),
).filter(this.termFilter);
},
},
diff --git a/docs/pages/icons/index.vue b/docs/pages/icons/index.vue
index 73f732010..28a9e35bb 100644
--- a/docs/pages/icons/index.vue
+++ b/docs/pages/icons/index.vue
@@ -1,101 +1,204 @@
- General use -
+General use
- Aliases with default colors -
+Aliases with default colors
- Learning activities -
+Learning activities
- Resource categories -
+Resource categories
- Kolibri products use a large number of icons that have a special meaning within our ecosystem. They generally draw from
- Importantly, we reference icons by a token specific to the Kolibri Design System rather than Material's names, in order to make token references more meaningful to designers and developers. + Importantly, we reference icons by a token specific to the Kolibri Design System rather than + Material's names, in order to make token references more meaningful to designers and + developers.
- You can use the
- Icons should be scaled relative to their surrounding text size. Use the KLabeledIcon component to automatically set a consistent sizing and spacing with associated text:
+ Icons should be scaled relative to their surrounding text size. Use the
+ KLabeledIcon component to automatically set a consistent sizing and spacing
+ with associated text:
-
-
-
- Many of these icons also are used with
- When inline with text, icons should usually be the same color as the text:
+ Many of these icons also are used with
+
When inline with text, icons should usually be the same color as the text:
-
-
- There are exceptions to this pattern, however. For example in the columns of coach reports, most text is dark gray for readibility color while the icons for Mastered, In-progress, etc are colored. + There are exceptions to this pattern, however. For example in the columns of coach reports, + most text is dark gray for readibility color while the icons for Mastered, In-progress, etc + are colored.
Avoid using icons that are culture- or context-specific.
- Avoid using icons that are culture- or context-specific.
+ Icons which in some sense relate to the passage of time must be mirrored when viewed in a
+ right-to-left language. Read more about
+
- Icons which in some sense relate to the passage of time must be mirrored when viewed in a right-to-left language. Read more about
- When used with the KIcon component, icons will be automatically flipped when appropriate.
+ When used with the KIcon component, icons will be automatically flipped when
+ appropriate.
- If it is not purely decorative, ensure that the icon or its parent component has associated text that can be read by a screen reader. + If it is not purely decorative, ensure that the icon or its parent component has associated + text that can be read by a screen reader.
These icons have special meaning in Kolibri products
If the default Material icon library and/or community-contributed libraries are insufficient, use
+ If the default Material icon library and/or community-contributed libraries are
+ insufficient, use
+
- For use in documentation such as the
- Copy and paste it into a file such as rstIconReplacements.txt and then add it to your conf.py file rstIconReplacements.txt and then add it
+ to your conf.py file
+
- Then in *.rst files you can use, for example, |video| to insert the *.rst files you can use, for example, |video| to insert
+ the
- The Kolibri Design System contains resources for designers and developers building Kolibri products. The purpose is to: + The Kolibri Design System contains resources for designers and developers building Kolibri + products. The purpose is to:
- The design system includes both documentation design patterns and a shared front-end UI library. Together, these provide solutions to common design and implementation needs in Kolibri products. + The design system includes both documentation design patterns and a shared front-end UI + library. Together, these provide solutions to common design and implementation needs in + Kolibri products.
- If the design system is failing to achieve the objectives above, it needs to be updated. Your contributions and input are appreciated. For more information, see the
- The Kolibri Design System contains guidance and functionality that reflects very common design patterns across all of our products. It also gives guidance about patterns and component that are consistently different between products, for example due to different user needs or browser requirements. + The Kolibri Design System contains guidance and functionality that reflects very common + design patterns across all of our products. It also gives guidance about patterns and + component that are consistently different between products, for example due to different + user needs or browser requirements.
- It should not contain design patterns, UI components, or configuration parameters that are rarely used or liable to change in the future. + It should not contain design patterns, UI components, or configuration parameters + that are rarely used or liable to change in the future.
- The public API of the shared UI library is only that which is documented in this site. Functionality which is not documented here should be considered either experimental or a private implementation detail. + The public API of the shared UI library is only that which is documented in this + site. Functionality which is not documented here should be considered either experimental or + a private implementation detail.
- If using an existing pattern or component would significantly degrade the user experience compared to designing and building an alternate user interface, we should prioritize the user experience and build the custom UI. + If using an existing pattern or component would significantly degrade the user + experience compared to designing and building an alternate user interface, we should + prioritize the user experience and build the custom UI.
- On the other hand, if using an existing pattern or component would not significantly degrade the UX, we should prioritize consistency and reuse. The benefits of standardization here outweigh the marginal benefits of a UI customized for a narrow need. + On the other hand, if using an existing pattern or component would not significantly degrade + the UX, we should prioritize consistency and reuse. The benefits of standardization here + outweigh the marginal benefits of a UI customized for a narrow need.
- Decisions to deviate from the design system should be made intentionally, and the justification to do so should be documented. Undocumented deviations may be mistakes, oversights, or technical/UX debt. + Decisions to deviate from the design system should be made intentionally, and the + justification to do so should be documented. Undocumented deviations may be mistakes, + oversights, or technical/UX debt.
- Over time we should be able to observe patterns in the intentional deviations, and use them as guidance for implementing updates to the design system that benefit the rest of the product ecosystem. + Over time we should be able to observe patterns in the intentional deviations, and use them + as guidance for implementing updates to the design system that benefit the rest of the + product ecosystem.
- We welcome feedback and contributions! It's important that the Design System works for you, so please help shape it. To get started contributing to the design system, see the
- To contribute to the Kolibri ecosystem and Learning Equality more generally, see
Kolibri Design System (KDS) is a Vue plugin. Register it in your application alongside scripts that are needed for its full functioning:
++ Kolibri Design System (KDS) is a Vue plugin. Register it in your application alongside + scripts that are needed for its full functioning: +
-
-
- Until this section is better documented, refer to
- Breadcrumbs help understand the hierarchy among levels and a user's location in it. We often use breadcrumbs to aid navigation across channels, topic trees, and resources.
+ Breadcrumbs help understand the hierarchy among levels and a user's location in it. We often
+ use breadcrumbs to aid navigation across channels, topic trees, and resources.
- Breadcrumbs take the full width of their container. When there is not enough space available, items that can't be displayed will automatically collapse into the drop-down and visible items might also get truncated:
+ Breadcrumbs take the full width of their container. When there is not enough space
+ available, items that can't be displayed will automatically collapse into the drop-down and
+ visible items might also get truncated:
- When there is only one item, it won't be displayed by default. You can set
showSingleItem to true to show it:
+ When there is only one item, it won't be displayed by default. You can set
+ showSingleItem to true to show it:
- Links to intermediary items can be disabled by omitting the
-
+
-
+
diff --git a/docs/pages/kbutton.vue b/docs/pages/kbutton.vue
index fedd22535..d4c81d6f3 100644
--- a/docs/pages/kbutton.vue
+++ b/docs/pages/kbutton.vue
@@ -1,46 +1,87 @@
-
-
+
-
-
-
+
-
diff --git a/docs/pages/kbuttongroup.vue b/docs/pages/kbuttongroup.vue
index 8a54a62d0..ad4a14796 100644
--- a/docs/pages/kbuttongroup.vue
+++ b/docs/pages/kbuttongroup.vue
@@ -1,22 +1,26 @@
-
-
+
-
-
diff --git a/docs/pages/kcard.vue b/docs/pages/kcard.vue
index e92fdfeca..7a4f234ae 100644
--- a/docs/pages/kcard.vue
+++ b/docs/pages/kcard.vue
@@ -1,16 +1,29 @@
-
-
+
+
-
-
+
-
+
@@ -109,17 +180,14 @@
-
-
- ...
-
-
+ ...
- Build cards in such a way
that
that
@@ -133,9 +201,7 @@
@@ -149,24 +215,41 @@
-
+
-
@@ -242,16 +330,33 @@
-
Accessibility
-
-
@@ -295,32 +403,40 @@
- export default {
- methods() {
- onClick() {
- console.log('Card clicked');
- }
- },
- };
+ export default { methods() { onClick() { console.log('Card clicked'); } }, };
Layout
-
-
link attribute, or making it falsey.
+ Links to intermediary items can be disabled by omitting the link attribute, or
+ making it falsey.
- Creates a <button> tag and is appropriate for triggering javascript functions on-click. It can take on a number of visual styles, including both links and buttons.
+ Creates a <button> tag and is appropriate for triggering javascript
+ functions on-click. It can take on a number of visual styles, including both links and
+ buttons.
-
-
- For an overview of buttons and links in Kolibri, see the
- The KButtonGroup component is used to provide consistent, 8px spacing for buttons. For example:
+ The KButtonGroup component is used to provide consistent, 8px spacing for
+ buttons. For example:
- It is most often used with the
KCard is a versatile and accessible base component for creating various types of cards, such as lesson cards, resource cards, and more.
It manages the layout, including the thumbnail image, title, and other content. It offers several base layouts and many customization options. Cards like the examples shown can be created, and many others.
- -
+ KCard is a versatile and accessible base component for creating various types
+ of cards, such as lesson cards, resource cards, and more.
+
+ It manages the layout, including the thumbnail image, title, and other content. It offers + several base layouts and many customization options. Cards like the examples shown can be + created, and many others. +
+ +It is intended for use with KCardGrid. Below is an overview of KCard's features and best practices focused on its inner content. To learn more about card grids and related KCard features, see
+ It is intended for use with KCardGrid. Below is an overview of
+ KCard's features and best practices focused on its inner content. To learn more
+ about card grids and related KCard features, see
+
Also follow
+ Also follow
+
KCard must always be used within KCardGrid as its direct child to ensure proper semantics and accessibility. Refer to
+ KCard must always be used within KCardGrid as its direct
+ child
+ to ensure proper semantics and accessibility. Refer to
+
that
KCard is not a direct child of KCardGrid
+ Build cards in such a waythat
KCard is not a direct child of
+ KCardGrid
-
- ...
-
+ ...
Always use the title prop to assign an unique title to each card in a grid, and the headingLevel prop to set the heading level on it. The level needs to correspond to the surrounding context.
+ Always use the title prop to assign an unique title to each card in a grid,
+ and the headingLevel prop to set the heading level on it. The level needs to
+ correspond to the surrounding context.
+
Examples:
-
-
The scoped title slot with its titleText attribute can be used to customize the title.
+ The scoped title slot with its titleText attribute can be used to
+ customize the title.
+
Do not use a heading element within the title slot to avoid duplicate headings in the markup output.KCard already handles a heading element internally.
+ Do not use a heading element within the title slot to avoid duplicate
+ headings in the markup output.KCard already handles a heading element internally.
The titleMaxLines prop can be used to truncate the title to a set number of lines.
+ The titleMaxLines prop can be used to truncate the title to a set number of
+ lines.
+
Accessibility
- KCard and KCardGrid offer built-in accessibility. For the parts they are responsible for, they manage proper semantics, screen reader support, and right-to-left language compatibility.
However, it is necessary to ensure that cards built with KCard are fully accessible, particularly the slot content that KCard doesn't control. Refer to
+ KCard and KCardGrid offer built-in accessibility. For the parts
+ they are responsible for, they manage proper semantics, screen reader support, and
+ right-to-left language compatibility.
+
+ However,
+ it is necessary to ensure that cards built with KCard are fully accessible,
+ particularly the slot content that KCard doesn't control.
+ Refer to
+
Always test semantics, accessibility, and right-to-left of the final cards.
@@ -277,7 +382,10 @@Listen to the click event to perform a custom action (whether or not the to prop is used).
+ Listen to the click event to perform a custom action (whether or not the
+ to prop is used).
+
Note that long clicks are ignored to allow for text selection.
-See
+ See
+
Layout
- KCard has two orientations: horizontal and vertical. It is also possible to configure whether a thumbnail area is displayed, its size and alignment. By combining orientation, thumbnailDisplay and thumbnailAlign props, the following card layouts can be achieved to organize diverse kinds of content:
+ KCard has two orientations: horizontal and vertical. It is also possible to
+ configure whether a thumbnail area is displayed, its size and alignment. By combining
+ orientation, thumbnailDisplay and
+ thumbnailAlign props, the following card layouts can be achieved to organize
+ diverse kinds of content:
+
-
+
+
Short Activity
-
- Biology
-
+ Biology
@@ -354,13 +470,17 @@
prependTitle="(2)"
>
-
-
+
Content slots
-
-
+
Short Activity
@@ -374,7 +494,10 @@
hideFooter
>
- To a large extent, KCardGrid takes care of responsiveness. Depending on a chosen card layout, KCard's inner area can be further adjusted to offer even better experience. Refer to
+ To a large extent, KCardGrid takes care of responsiveness. Depending on a
+ chosen card layout, KCard's inner area can be further adjusted to offer even
+ better experience. Refer to
+
Content slots
- Use aboveTitle, belowTitle, and footer slots to add content to a card. KCard will organize these areas according to its
+ Use aboveTitle, belowTitle, and footer slots to add
+ content to a card. KCard will organize these areas according to its
+
-
- Short Activity
-
-
- Biology
-
+
-
-
Thumbnail
-
Placeholder
-
Interactive elements
-
+
-
@@ -777,7 +987,10 @@
-
+
+ Short Activity
+ Biology
@@ -543,7 +679,10 @@
The title slot is available as an alternative to the title prop. See
+ The title slot is available as an alternative to the title prop.
+ See
+
Thumbnail
- KCard offers multiple ways to display thumbnails, depending on these factors:
+ KCard offers multiple ways to display thumbnails, depending on these factors:
+
-
-
See
+ See
+
Placeholder
- When KCard is set to display the thumbnail, the thumbnail area acts as a placeholder if the image is missing, fails to load, or is still loading. In such cases, a light gray background is shown in place of the image.
+ When KCard is set to display the thumbnail, the thumbnail area acts as a
+ placeholder if the image is missing, fails to load, or is still loading. In such cases, a
+ light gray background is shown in place of the image.
+
Use the thumbnailPlaceholder slot to add a placeholder element, such as an icon, to this area. Provide a placeholder element even if a thumbnail image is available. It serves as fallback content if the image fails to load unexpectedly.
+ Use the thumbnailPlaceholder slot to add a placeholder element, such as an
+ icon, to this area.
+ Provide a placeholder element even if a thumbnail image is available. It serves as
+ fallback content if the image fails to load unexpectedly.
+
The thumbnailScaleType prop determines how a thumbnail image is scaled to fit the thumbnail area. The available options are the same as KImg's scaling options.
If a thumbnail image's quality and ratio are unknown, which is often the case in our cards, it's best to use the default value 'centerInside' since it never distorts the image or impairs its quality.
See
+ The thumbnailScaleType prop determines how a thumbnail image is scaled to fit
+ the thumbnail area. The available options are the same as KImg's scaling
+ options.
+
+ If a thumbnail image's quality and ratio are unknown, which is often the case in our
+ cards, it's best to use the default value 'centerInside'
+ since it never distorts the image or impairs its quality.
+
+ See
+
Interactive elements
- When adding interactive elements like buttons to a card via slots, apply the .stop event modifier to their @click event to prevent the card
This applies to all slot content, but considering accessibility is especially important with interactive elements. For instance, ariaLabel is applied to the bookmark icon button in the following example so that screenreaders can communicate its purpose. In production, more work would be needed to indicate the bookmark's toggled state. Always assess on a case-by-case basis.
+ When adding interactive elements like buttons to a card via slots, apply the
+ .stop event modifier to their @click event to prevent the card
+
+ This applies to all slot content, but considering accessibility is especially important
+ with interactive elements.
+ For instance, ariaLabel is applied to the bookmark icon button in the following
+ example so that screenreaders can communicate its purpose. In production, more work would be
+ needed to indicate the bookmark's toggled state. Always assess on a case-by-case basis.
+
Selection controls like checkboxes or radio buttons can be placed next to the card's main area via the select slot.
+ Selection controls like checkboxes or radio buttons can be placed next to the card's main
+ area via the select slot.
+
Use "Select '[card title]'" as label and hide it with the visuallyhidden class to keep the label available for screen readers.
+ Use "Select '[card title]'" as label and
+ hide it with the visuallyhidden class to keep the label available for screen
+ readers.
+
KCard handles all remaining accessibility aspects, including semantics and focus order. If there are other interactive elements in a card, a selection control will receive focus last in the keyboard navigation order.
+ KCard handles all remaining accessibility aspects, including semantics and
+ focus order. If there are other interactive elements in a card, a selection control will
+ receive focus last in the keyboard navigation order.
+
Managing the selection state is not KCard's responsibility.
- 
+ 
+ 
+ 
+ 
- 
- 
- 
- 
- 
+ 
- 
- 
- 
- 
- 
+ 
+ 
+ 
- 
- 
- 
- 
- 
- 
+ 
+ 
+ 
+ 
- 
+ 
+ 
- 
- 
+ 
+ 
+ 
- 
- 
- 
+ 
-